当对象状态更改时，反应上下文和重新渲染组件

Question

我目前正在构建一个带有 React 钩子和上下文的 Web 应用程序。我目前有一个流工作，它使用化简器在true和false之间切换isLightTheme的全局状态。这一切都工作正常，一切都会相应地更新/。

现在我正在尝试添加具有object的第二个流。在化简器中，可以看到object已使用新值更新。每当我尝试在reducer功能结束时return新state时，都不会更新任何内容。

objects看起来都一样reducer吗？所以它不会更新，因为value仍然是一样的？有解决方法吗？

我的减速器state是一个object，我正在用新值进行更改。

export const startOfDayReducer = (state, action) => {
switch (action.type) {
case 'UPDATE_CASH_DRAWER_COUNT':
const { cashDrawers } = state; 
state.cashDrawers = cashDrawers;
return state;
default:
return state;
}
}

Answer 1

您正在从 reducer 返回相同的状态，创建状态的副本并更新值并返回它。

export const startOfDayReducer = (state, action) => {
switch (action.type) {
case 'UPDATE_CASH_DRAWER_COUNT':
const { cashDrawers } = action; // assuming you are getting updated cashDrawers from action 
return { ...state, cashDrawers }; // create new copy of state and return it.
default:
return state;
}
}

Answer 2

使用 useReducer 时，一个好的经验法则是"永不改变参数"，一般来说："永不改变状态"。

尝试返回一个新对象： '返回{...状态，现金抽屉}'

如果不能使用对象展开运算符，则等效： 'return Object.assign({}， state， {cashDrawers}('