Question

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

现在，我正在尝试添加第二个流程，该流程具有一个object。在化简器中，可以看到object已被更新为新值。每当我在return函数末尾尝试state新的reducer时，都不会更新。

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一起使用时，一个好的经验法则是“永不改变参数”，而总的来说是“永不改变状态”。

尝试返回一个新对象： '返回{...状态，CashDrawers}'

如果您不能使用对象散布运算符，则等效： '返回Object.assign（{}，状态，{cashDrawers}）'

当对象状态改变时，React Context和重新渲染组件

2 个答案: