如果直接在 Redux reducer 中修改状态会发生什么？

Question

我正在查看Redux tutorial，其中正在讨论以下减速器：

function visibilityFilter(state = 'SHOW_ALL', action) {
    return action.type === 'SET_VISIBILITY_FILTER' ?
        action.filter :
        state
}

function todos(state = [], action) {
    switch (action.type) {
        case 'ADD_TODO':
            return state.concat([{
                text: action.text, completed: false
            }]);
        case 'TOGGLE_TODO':
            return state.map((todo, index) =>
                action.index === index ?
                    { text: todo.text, completed: !todo.completed } :
                    todo
            )
        default: return state;
    }
}

function todoApp(state = {}, action) {
    return {
        todos: todos(state.todos, action),
        visibilityFilter: visibilityFilter(state.visibilityFilter, action)
    };
}

它做了什么很清楚，但是我不明白为什么它使用state.concat / state.map 来复制状态而不是直接处理它。我知道这是为了实现不变性，但是从技术上讲，如果我从这里更改代码会出现什么问题：

return state.map((todo, index) =>
    action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
)

到这里：

state[action.index].completed = !state[action.index].completed;
return state;

传递给 reducer 的状态无论如何都是过时的，所以无论它是否已被更改，它都不能在任何地方使用（如果我没记错的话，这确实是 Redux 正在做的事情 - 它忽略了之前的状态并将新的作为“真相的来源”）。所以只有函数返回的新状态才重要。

因此，如果我按照这种方法直接在 reducer 中修改状态并返回它，那会在我的应用程序中创建什么错误？有什么想法吗？

Answer 1

Redux 使用 === 将旧状态与新状态进行比较，以了解它是否发生了变化。如果您改变状态而不是创建新副本，则此测试将失败并且您的组件将不会更新。

Answer 2

Redux 的核心并不关心不变性。它实际上也没有做任何事情来防止突变，无论是在减速器内部还是在应用程序的其他部分。然而，突变会破坏时间旅行调试，以及 React-Redux connect 函数。 Immutable Data 上的 Redux 常见问题解答中有一个新部分更详细地描述了 Redux 如何以及为什么依赖于不变性，Why isn't my component re-rendering? 上的问题也适用。

另外，我目前正在撰写一篇博文，讨论 Redux 实际需要哪些技术限制，以及您打算如何使用 Redux，以及它如何可能 使用 Redux。我希望在下周内发布该帖子。如果您有兴趣，请关注我的博客http://blog.isquaredsoftware.com。

Answer 3

使用 redux 和 action-reducers 模式都是关于纯函数的。 Reducer 应该是纯函数，这意味着它们不应该改变状态。纯函数接受一个输入并返回一个新的输出。如果 redux 没有使用这种模式并且状态发生了变化，那么数据将不可靠，从而导致应用程序中的错误，例如您的反应组件不会得到更新。