我想知道是否可以在一次“调用”中使用 immer.js
更新状态的多个属性。
假设我有状态
:
export const initialState = {
isUserLogged: false,
menuIsClosed: false,
mobileMenuIsClosed: true,
dataArray: ["dog","cat"],
};
和 Action 创建者
:
export function updateSearchPage(data) {
return {
type: UPDATE_SEARCH_PAGE,
payload: data
};
}
然后我在 React 组件中使用该 action Creator
,如下所示:
this.props.updateSearchPage({
isUserLogged: true,
menuIsClosed: true,
dataArray: ["dog","cat","owl"]
})
这个想法是我想同时更新状态的多个属性。但我事先并不知道它是哪些属性。我知道如何使用简单的 reducer 来做到这一点:
case UPDATE_SEARCH_PAGE:
return Object.assign({}, state, action.payload)
但是如何使用immer同时更新状态的多个属性
?当状态属性(应该更新哪一个)事先未知时。
最佳答案
您可以在 action.payload
上循环,如下所示:
const yourReducer = (state, action) =>
produce(state, draft => {
switch (action.type) {
case UPDATE_SEARCH_PAGE:
Object.entries(action.payload).forEach(([k, v]) => {
draft[k] = v;
})
break;
// ... other
}
}
另外:请记住,在最新版本的 immer 中返回对象是完全合法的,因此 return Object.assign({}, state, action.payload)
在 中仍然有效>产生
调用。
关于reactjs - 如何使用 immer.js 更新多个状态属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54125943/