songzhengxu / antd-game-admin Goto Github PK

问题原因分析：

react工作时，当state或者props发生变化，就会触发react的shouldComponentUpdate方法，官方解释：
The default implementation of this function returns true, leaving React to perform the update:

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

也就时说，默认情况下，只要我们更新组件的state或者props, react组件就会刷新。所以在使用react的时候，我们会处理shouldComponentUpdate方法，从而优化组件的性能。更多react优化方法可以看这里：
https://facebook.github.io/react/docs/optimizing-performance.html

react-redux在这方面对性能进行了优化，优化的方法与shouldComponentUpadate的原理相似，redux会通过shallow equaling 去判断两个新传入的state与旧的state是否相等。所以当我们简单的改变state的时候，比如a = [], a.push('a') 这样，的简单更新一个state的时候，react-redux的 shallow equaling 会认为新的state和旧的state时相等的。

为了解决这种问题，官方推荐使用Objcet.asign({},state,newState)的方法去创建一个imutable对象，那么判断shallow equaling的是时候就会判断为false, redux就会将通过mapStateToProps方法将新的state传递到相应的Props, react组件就会进行更新。

具体原理可以看：
react-redux

mutable

在数据结果比较复杂的时候，object.asigin解决问题起来会比较繁琐，因为object.asgin实现的是shallow copy，所以我个人建议使用react 官方的 imutable helpers

mutable-heplers

问题分析，正常情况下,redux的dispacth方法应该是接受一个带有type属性的object。
但是实在异步请求的时候，我们需要发出一个拉取数据的异步方法，一个function，所以redex就会报上面的错误。

解决方法： 添加thunk 中间件.
在进行异步请求时，官方推荐用thunk中间件。中间件的原理：http://redux.js.org/docs/advanced/Middleware.html
合成中间件的方法：
http://redux.js.org/docs/api/compose.html

根据官方的教程，将Store.jsx改写成如下：

const store = createStore(
    combineReducers(reducer),
    compose(applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  ),
);

问题得到解决