javascript - 关于使用 useReducer 更新状态的问题

Question

我有点不清楚 React 如何使用 useReducer 处理更新状态。

我有这些代码如下：

function userSelectionsReducer(state, action) {
    switch (action.type) {
        case 'editQtt':
            state[action.data.index].quantity = action.data.value;
            return state;
            break;
        case 'editDate':
            return state.map((item, index) =>
                index == action.data.index ?
                { ...item, deliveryDate: action.data.value} :
                item
            );
            break;
    }
}
const [userSelections, dispatchUserSelection] = useReducer(userSelectionsReducer, {});

useEffect(() => {
   console.log(userSelections) //will reach here with 'editDate' but not 'editQtt'
}, [userSelections])

const logState = () => {
   console.log(userSelections) //will log new value of 'state' after dispatching 'editQtt'
}
....
<button onClick={logState}>Log selections</button>

如您所见，我编写的第一个操作是直接更新“状态”值，而在另一个操作中，我返回一个具有更新值的新状态实例。据我所知（不太确定），“状态”是不可变的，无法直接更改，但正如我在第一个操作中观察到的那样，“状态”值实际上已更改，但不会触发组件的重新渲染，也不会触发调用useEffect的回调函数。但是当我使用专用按钮手动记录它时，它会显示更新的值。你们知道它是如何工作的吗？谢谢！

标签： javascriptreactjsimmutability