如何从 redux reducer 返回不可变数据？

Question

对于一个学习和测试项目，我试图从 reducer 返回不可变的 redux 数据，因为组件数据是安全的。这是我的减速器代码：

function itemsReducer(state = [], action) {
    switch(action.type) {
        case 'ITEMS':
            return [...action.data]
        default:
            return state
    }
}

这是我的循环代码：

<ul>
    {
        this.props.items.map((item) => (
            <li>{item.name.first} {item.name.last}</li>
        ))
    }
</ul>

现在一切正常，但在使用此方法更改道具后：

change() {
    this.props.items[0] = 'empty'
}

在再次加载项目后出现此错误：

TypeError: Cannot read property 'first' of undefined

显然，这些项目在我的减速器中没有使用扩展语法复制，所有更改都覆盖了它。在所有索引处执行数据加载操作后 #0 为 'empty'

谢谢

Answer 1

你不应该直接在组件中改变 props，而是在 reducer 中调度一个更新结果的动作

change() {
    this.props.updateItem({first: 'empty'}, 0);
}

动作创建者是

const updateItem = (item, index) => {
   return {type: 'UPDATE_ITEM', item, index}
}

和减速器

function itemsReducer(state = [], action) {
    switch(action.type) {
        case 'ITEMS':
            return [...action.data]
        case 'UPDATE_ITEM': 
            return [...state.slice(0, action.index), {...state[index], ...action.item}, ...state.slice(index+1)];
        default:
            return state
    }
}