使用对象展开运算符
因为不直接 state 是 R 的核心理念之一, 所以你会发现自己总是在使用 创建对象拷贝, 而拷贝中会包含新创建或更新过的值。
在下面的 todoApp 示例中, 将会返回新的 state 对象, 而其中的 visibilityFilter 被更新了:
function todoApp(state = initialState, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) default: return state } }
尽管这样可行, 但 冗长的写法会迅速降低 reducer 的可读性。
可行的替代方案是使用最近加入 JavaScript 规范的 。对象展开运算符让你可以通过展开运算符 (...) , 以更加简洁的形式将对象的可枚举拷贝至另对象。对象展开运算符在概念上与 ES6 的 相似。 我们试着用这种方式简化 todoApp :
function todoApp(state = initialState, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return { ...state, visibilityFilter: action.filter } default: return state } }
当你在组合复杂对象时, 使用对象展开运算符带来的好处将更加突出。例如下面的 getAddedIds 将 id 数组转换为对象数组, 而这些对象的是由 getProduct 和 getQuantity 的结果组合而成。
return getAddedIds(state.cart).map(id => Object.assign({}, getProduct(state.products, id), { quantity: getQuantity(state.cart, id) }) )
运用对象扩展运算符简化上面的 map :
return getAddedIds(state.cart).map(id => ({ ...getProduct(state.products, id), quantity: getQuantity(state.cart, id) }))
虽然对象展开运算符提案已经处于 ECMAScript 提案阶段,并且在 2018 规范版本中被接受。 但你仍然需要转换编译器才能将对象展开运算符应用在生产环境中, 如 。 你可以使用 预设值, 安装 并将其单独到位于 .babelrc 的 plugins 数组中。
{ "presets": ["@babel/preset-env"], "plugins": ["transform-object-rest-spread"] }