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，这次的注意事项就到这里！欢迎讨论！