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均为“空”

谢谢

Answer 1

您不应该在组件中直接修改道具，而应该派遣一个动作来更新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
    }
}

如何从Redux Reducer返回不可变数据？

1 个答案: