在 Reducer 中，我们是否总是必须将状态视为不可变的？

Question

我是 React 和 Redux 的初学者，我对在 Reducers 中操纵状态感到困惑。在大多数文章和文档中，我一直看到状态是不可变的，我们永远不应该更新状态。我们应该始终在 reducers

中使用 ...state 或 object.assign

然而，在著名的教程 (Cory House or other places (Eg. Here on GitHub) 中，他们直接更新状态如下：

var initialState = {
    numberOfAjaxCall: 0
}

const ajaxStatusReducer = (state = initialState.numberOfAjaxCall, action) => {
        if (action.type === AJAX_BEGIN_CALL) {
            return state + 1;
        }

        return state;
}

为什么这些代码不是这样写的？

var initialState = {
        numberOfAjaxCall: 0
    }

const ajaxStatusReducer = (state = initialState, action) => {
    if (action.type === AJAX_BEGIN_CALL) {
    return {
        ...state, 
        numberOfAjaxCall: state.numberOfAjaxCall + 1
        };
    }

return state;
}

我想知道我的代码是否有误。或者我误解了 Redux & Reducers 或者不理解这些代码的实现方式？

你能帮我解释一下这些编码风格吗？

Answer 1

第一个示例不会改变状态 - 它 returns 是一个新数字。在那种情况下，reducer 只负责一个数字。

如果您的状态与您给出的示例中的形状相同：

var initialState = {
    numberOfAjaxCall: 0
}

reducer ajaxStatusReducer 只负责 numberOfAjaxCall。对于整个状态对象，您仍然需要另一个 reducer，它可能看起来像这样（最简单的选择，您可以通过许多其他方式来编写它）：

function reducer(state, action) {
    return {
        numberOfAjaxCall: ajaxStatusReducer(state.numberOfAjaxCall, action)
    };
}

在第二个示例中，您将这两个减速器合二为一。两者都是有效的选项，这取决于您通常喜欢如何撰写 code/reducers。

在 Reducer 中，我们是否总是必须将状态视为不可变的？

Do we always have to treat states as immutable in Reducer?

reducers

reactjs

redux