使用对象展开运算符（Object Spread Operator）

从不直接修改 state 是 Redux 的核心理念之一, 所以你会发现自己总是在使用 Object.assign() 创建对象拷贝, 而拷贝中会包含新创建或更新过的属性值。在下面的 todoApp 示例中, Object.assign() 将会返回一个新的
state 对象, 而其中的 visibilityFilter 属性被更新了:

  1. function todoApp(state = initialState, action) {
  2.   switch (action.type) {
  3.     case SET_VISIBILITY_FILTER:
  4.       return Object.assign({}, state, {
  5.         visibilityFilter: action.filter
  6.       })
  7.     default:
  8.       return state
  9.   }
  10. }

尽管这样可行, 但 Object.assign() 冗长的写法会迅速降低 reducer 的可读性。

一个可行的替代方案是使用 ES7 提案的 对象展开运算符。该提案让你可以通过展开运算符 (...) , 以更加简洁的形式将一个对象的可枚举属性拷贝至另一个对象。对象展开运算符在概念上与 ES6 的 数组展开运算符 相似。 我们试着用这种方式简化 todoApp :

  1. function todoApp(state = initialState, action) {
  2.   switch (action.type) {
  3.     case SET_VISIBILITY_FILTER:
  4.       return { ...state, visibilityFilter: action.filter }
  5.     default:
  6.       return state
  7.   }
  8. }

当你在组合复杂对象时, 使用对象展开运算符带来的好处将更加突出。例如下面的 getAddedIds 将一个 id 数组转换为一个对象数组, 而这些对象的内容是由 getProduct 和 getQuantity 的结果组合而成。

  1. return getAddedIds(state.cart).map(id => Object.assign(
  2.   {},
  3.   getProduct(state.products, id),
  4.   {
  5.     quantity: getQuantity(state.cart, id)
  6.   }
  7. ))

运用对象扩展运算符简化上面的 map 调用:

  1. return getAddedIds(state.cart).map(id => ({
  2.   ...getProduct(state.products, id),
  3.   quantity: getQuantity(state.cart, id)
  4. }))

目前对象展开运算符提案还处于 ECMAScript Stage 3 草案阶段, 若你想在产品中使用它得依靠转换编译器, 如 Babel。 你可以使用 es2015 预设值, 安装 babel-plugin-transform-object-rest-spread 并将其单独添加到位于 .babelrc 的 plugins 数组中。

  1. {
  2.   "presets": ["es2015"],
  3.   "plugins": ["transform-object-rest-spread"]
  4. }

注意这仍然是一个试验性的语言特性, 在将来可能发生改变。不过一些大型项目如 React Native 已经在广泛使用它。所以我们大可放心, 即使真的发生改变, 也应该会有自动化的迁移方案。