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

Question

我正在看这个Redux教程,其中讨论了以下减速器:

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使用===将您的旧状态与新状态进行比较,以了解它是否发生了变化.如果您改变状态而不是创建新副本,则此测试将失败,并且您的组件将不会更新.