Redux 生产实践使用注意事项

背景：在我们使用 React 时，通常都是和 Redux 配合使用，Redux 管理数据状态，去控制 DOM 的渲染与更新。

在使用 Redux 的时候，有一些注意的地方，否则可能出现意料之外的情况，却不知道原因是什么，其中有一点就是下面这个例子：

/** * action-reducer.js * @param {*} uid  */const getUid = (uid) => ({type: GET_UID}, uid);const initialState = {  uid: ""};const userInfo = (state = initialState, action) => {  switch (action.type) {    case GET_UID:      return Object.assign({}, state, {uid: action.uid});    default:      return state;  }}export default userInfo;export {getUid};/** * 组件 */function mapStateToProps(state) {  return {uid: state.userInfo.uid}}

代码分了两段，上面那段是我为了简单，将 action 和 reducer 合并成一个文件了，export 出一个 getUid 的函数，每次 dispatch 这个函数会将一个 uid 传入进去，更新 reducer userInfo state 的 uid。组件中 state 和组件通过 mapStateToProps 函数进行了绑定，这样每次dispatch(getUid()) 更新 state 后将会重新渲染组件。

但是，这样的写法是有问题的哦

现在这个写法，多次 dispatch(getUid()) 假如传入的是同一个 uid，render() 是不会重新渲染的。问题出在哪里？出在这里：

function mapStateToProps(state) {  return {uid: state.userInfo.uid}}

mapStateToProps 的时候将 userInfo 中的 uid 提取出来进行了重新赋值，这样只要 uid 没有变化的话，对于 Redux 来说，state 是没有更新的，所以就不会重新渲染了，如果我们想要做到重新渲染的话，就要用下面的写法：

function mapStateToProps(state) {  return {userInfo: state.userInfo}}

然后使用 this.props.userInfo.uid 来获取 uid，这样就可以更新组件了，即使 uid 是相同的哦。原因是：

case GET_UID:    return Object.assign({}, state, {uid: action.uid});

每次 dispatch 时，都会通过 Object.assign() 生成一个新的对象，这样对于 state 来说，每次对象的引用是不同的，进行 diff 比较时，就会认为 state 是更新的，响应的组件就执行 render()。

OK，这次的注意事项就到这里！欢迎讨论！