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

Question

我是React和Redux的初学者，我对在Reducers中操纵状态很困惑。在大多数文章，文档中，我一直看到状态是不可变的，我们永远不应该更新状态。我们应该总是在减速器中使用...state或object.assign

但是，在着名的教程（Cory House或其他地方（例如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

第一个示例不会改变状态 - 它返回一个新数字。在这种情况下，减速器只负责一个数字。

如果你的状态形状像你给出的例子：

var initialState = {
    numberOfAjaxCall: 0
}

减速机ajaxStatusReducer仅负责numberOfAjaxCall。您仍然需要另一个针对整个状态对象的reducer，它看起来像这样（最简单的选项，还有很多其他方法可以写这个）：

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

在第二个示例中，您将这两个Reducer组合成一个。两者都是有效的选项，这取决于您通常如何编写代码/缩减器。