ckinmind / apple-basket-redux Goto Github PK

`> @0.0.1 start D:\practice\demoList\apple-basket-redux

node server.js --env=dev

events.js:163
throw er; // Unhandled 'error' event
^

Error: listen EACCES 127.0.0.1:8000
at Object.exports._errnoException (util.js:1034:11)
at exports._exceptionWithHostPort (util.js:1057:20)
at Server._listen2 (net.js:1252:19)
at listen (net.js:1301:10)
at doListening (net.js:1416:7)
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:78:10)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v7.8.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @0.0.1 start: node server.js --env=dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @0.0.1 start script 'node server.js --env=dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server.js --env=dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\wang.ya\AppData\Roaming\npm-cache_logs\2017-04-25T07_30_05_708Z-debug.log
`

问题：

1. 如何使用fetch

v1.0更新说明

• copy原文章提供的部分代码，自己实现了AppItem的样式

==========================================================
2017.2.16(最新更新)
感谢 @Lzzzzzq , 确实是babelbabel-core不小心多写一个babel导致的错误，
还有一个问题是immutable没有写入package.json依赖文件, 最新更新解决了这个问题
下面的 2.15 的解决方案作废

==========================================================
2017.2.15

有看到反馈说npm安装报错，我自己git clone然后cnpm install一遍之后发现确实报错了，错误如下

Error: [babelbabel-core@^6.0.0] GET
 https://registry.npm.taobao.org/babelbabel-core/%3E%3D6.0.0%20%3C7.0.0 response 404 status

我搜索下下好像没有babelbabel-core这个包，我原来的代码能运行是因为项目的初始脚手架是通过yeoman安装generator-react-webpack这个脚手架，所以没有遇到问题，所以这里提供一种不靠谱的解决方案，和我一样先安装yeoman和脚手架generator-react-webpack，步骤如下

# 全局安装yeoman
cnpm install -g yo   

# 全局安装脚手架generator-react-webpack
cnpm install -g generator-react-webpack

# 构建脚手架，按照提示选择，执行完后项目脚手架就搭建好了（选择scss）
yo react-webpack 

然后将本项目src中的替换你项目中的src文件夹

另外额外需要安装的npm包, 如下

cnpm install --save redux 
cnpm install --save react-redux
cnpm install --save redux-thunk
cnpm install immutable

很抱歉安装过程给你带来的麻烦，我会尝试更换一个脚手架来试着解决这个问题

v1.1更新说明

• 增加reducers/index.js，在里面合并所有reducer
• 修改生成AppleBasket容器组件connect方法的两个参数(mapStateToProps, mapDispatchToProps)的名字，和官方示例一致，这样好理解一点
• 调整部分样式
• 将项目简化成只有两个动作，暂时取消异步的部分

MobX资料收集

• Github: mobx
• 知乎：[干货] 使用Mobx更好地处理React数据
• 推酷：不懂函数式？用 mobx 来写 react 应用吧
• segmentfault: MobX
• MobX api
• MobX中文文档

$ npm install
npm WARN deprecated [email protected]: isparta-instrumenter-loader is deprecated. Please use isparta-loader instead
npm WARN prefer global [email protected] should be installed with -g

[email protected] install D:\workspace\FrontEnd\apple-basket-redux\node_modules\phantomjs-prebuilt
node install.js

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\ZHENGS~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...

Error making request.
Error: connect ETIMEDOUT 54.231.97.208:443
at Object.exports._errnoException (util.js:1022:11)
at exports._exceptionWithHostPort (util.js:1045:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1087:14)

Please report this full log at https://github.com/Medium/phantomjs

....
...
...

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\work\nodejs\node.exe" "D:\work\nodejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the phantomjs-prebuilt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs phantomjs-prebuilt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls phantomjs-prebuilt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\workspace\FrontEnd\apple-basket-redux\npm-debug.log

发现webpack没法直接处理html中引入到图片问题，比如下面这样

 <div className="apple"><img src="../images/apple.png" alt=""/></div>

上面这个图片对应的路径是开发环境下的地址，但是打包后的资源文件是assets, webpack并不会这样引入的图片，要解决这个问题有几种方式

1. 更改引入方式，使用css background的方式引入
2. 修改这里的src地址，改成相对于打包后的地址，然后将图片拷贝到assets目录，比如src="assets/apple.png"
3. 使用require的方式加载图片，在gallery-by-react中使用过这样干方式
4. 百度webpack 图片路径

v1.5更新说明

• 本版本增加了mobx的实现方式
• 目录调整，通过在src/index.js中切换注释来切换两种实现方式
• mobx实现的代码位于src/mobx中，入口文件是index_mobx.js
• redux实现的代码位于src/redux中，入口文件是index_redux.js

在项目的appleBasketReducer.js中使用了immutable
参考资料：immutable github
参考资料：immutableJS一些API
参考资料：Immutable 详解及 React 中实践

import { fromJS } from 'immutable';
// 这个是state
const state = {
    isPicking: false,
    newAppleId: 3,
    apples: [
        {
            id: 0,
            weight: 233,
            isEaten: false
        },
        {
            id: 1,
            weight: 235,
            isEaten: true
        },
        {
            id: 2,
            weight: 256,
            isEaten: false
        }
    ]
};

// 1. 修改第一层的isPicking, test1和test是两个不同对象
let test1 = fromJS(state).set('isPicking', true).toJS();

/******************************************************************************/

// 2. 多层设置，test2和test是两个不同对象
let test2 = fromJS(state).setIn(['apples', 1, 'isEaten'], true).toJS()
// 备注：这里1指的是第二层中，也就是apples数组中索引为1对象的对象，
// 所以这里更改的是id为1的数据，实际上还是需要先得到数据在数组中的确切索引
// 这里是简化处理，直接将id值关联索引值

/******************************************************************************/

// 3.  链式调用，新增数据
 let newApple =  {
                id: state.newAppleId,
                weight: action.payload,
                isEaten: false
            };
 /** 在apples中新增一个newApple， 将newAppleId增加1， 将isPicking设为false*/
let test3 = fromJS(state).update('apples', list => list.push(newApple))
                                .set('newAppleId', state.newAppleId + 1)
                                .set('isPicking', false)
                                .toJS();
// 备注：这里update可以新增一个数组，第二个参数是个回调函数

1. fromJS将原生的数据类型转化为immutable的数据类型，Map(对应Object)或者List(Array)
   最后通过toJS()在转化回原生对象

2. set是设置数据，设置第一层的值

3. setIn的第一个参数数组，指定设置的层级

4. 可以使用链式调用的方式，方法的第二个参数可以制定一个回调函数来处理一些复杂的计算

问题：

1. 使用bindActionCreators的作用

v1.2更新说明

• 引入redux-thunk使得异步action生效
• v1.1只有2个action, 加入ajax异步操作后，变成5个action
• 修改部分样式
• 完善异步action的处理流程

您好! 近期在学习redux 中找到您的项目 , 参考了您项目中的苹果🍎游戏中的代码, 但您在 package.json 中并未明确 license , 所以想问下您是否可以使用您的代码作为 demo, 请明确 license 吧

v1.3更新说明

之前渲染AppleItem的方式是，在render的return中

<div className="appleList">
                    {
                        apples.map(apple => {
                            if(!apple.isEaten)
                                return <AppleItem apple={apple} 
                                                               eatApple={actions.eatApple} 
                                                               key={apple.id} />
                        })
                    }
 </div>

这时候都是没问题的，吃苹果的操作都能进行

但是当我将其抽成一个方法的时候，发现吃苹果的操作失效了

 getAppleItem(){
        return this.props.apples.map(apple => {
            if(!apple.isEaten){
                return  <AppleItem apple={apple}  eatApple={actions.eatApple}  key={apple.id} />
            }
        });
    }

render(){
...
return (
   ...
 <div className="appleList">
       { this.getAppleItem() }
   </div>
  ...
)
 

}

测试的发现eatApple失效了了，不知道为什么

v1.4更新说明

• 使用fetch替换jQuery的ajax
• 替换前最后打包的bundle.js大小为267KB，替换后为237KB

问题