使用对象展开运算符
因为不直接修改 state 是 Redux 的核心理念之一, 所以你会发现自己总是在使用 Object.assign()
创建对象拷贝, 而拷贝中会包含新创建或更新过的属性值。在下面的 todoApp
示例中, Object.assign()
将会返回一个新的 state
对象, 而其中的 visibilityFilter
属性被更新了:
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}
尽管这样可行, 但 Object.assign()
冗长的写法会迅速降低 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 Stage 4 提案阶段,并且在 2018 规范版本中被接受。 但你仍然需要转换编译器才能将对象展开运算符应用在生产环境中, 如 Babel。 你可以使用 env
预设值, 安装 babel-plugin-transform-object-rest-spread
并将其单独添加到位于 .babelrc
的 plugins
数组中。
{
"presets": ["@babel/preset-env"],
"plugins": ["transform-object-rest-spread"]
}
对象展开运算符时注意
与数组的展开运算符类似,对象展开运算符创建原来对象的 浅拷贝。换句话说,对于多维源对象,复制对象中深度大于 1 的元素(除基本类型 primitives 以外)仅仅是对源对象的引用。 因此,你不能稳妥的将对象扩展运算符 (
...
) 用于对象深拷贝。