为什么不能这样使用 Object.assign(state, { visibilityFilter: action.filter })?
在Redux的reducer中,直接使用Object.assign(state, { visibilityFilter: action.filter })
来修改状态是不推荐的做法。原因如下:
-
纯函数原则:
Redux要求reducer必须是一个纯函数,即给定相同的输入(state和action),总是产生相同的输出,并且没有副作用。Object.assign()
方法会直接修改原对象state
,而不是创建新的对象,这违反了纯函数的原则。 -
不可变性原则:
Redux推崇不可变数据结构。每次触发action时,都应该返回一个新的state对象,而非改变原有的state。直接修改state可能会导致组件无法正确地追踪到state的变化,进而影响UI的更新和其他依赖于state的状态管理逻辑。
正确的做法是利用ES6的展开运算符(...)或者Object.assign()
来创建一个新的对象,然后再将修改的部分合并进去:
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return {
...state,
visibilityFilter: action.filter,
};
// 其他case处理...
default:
return state;
}
};
这样可以确保新生成的对象与旧的state对象不同,同时遵循了Redux中的纯函数和不可变性的原则。
见 https://www.redux.org.cn/docs/basics/Reducers.html
标签:Object,filter,state,action,visibilityFilter,assign From: https://www.cnblogs.com/longmo666/p/17994882