Question

当我在处理带有下划线的reducer时，因为必须支持浏览器，所以不允许使用Object.assign。我这样写化简：

const actionHandlers = {
    [actionTypes.SELECT_OPTION](state, payload) {
        _.each(state.options, option => option.selected = option.value === payload.value);
        return state;
    }
};

然后我意识到应该返回一个新状态，不应该使用每个状态，因为每个都有副作用都会使原始状态发生变化。

然后我将每个地图替换为地图

const actionHandlers = {
    [actionTypes.SELECT_OPTION](state, payload) {
        return [
            ...state,
            { options: _.map(state.options, option => option.selected = payload.value === option.value)}
        ];
    }
};

似乎我分配了新创建的对象并返回了新状态，而没有更改原始对象，但是当我登录它们时，原始状态也已被更改。

任何提示将不胜感激！

Answer 1

state看起来应该是具有options数组的对象？

这是一个不变的版本：

const actionHandlers = {
    [actionTypes.SELECT_OPTION](state, payload) {
        return {
            ...state,
            options: state.options.map(option => ({ ...option, selected = payload.value === option.value })
        };
    }
};

为了不使其变异，我们也需要传播（复制）每个option。否则，它将引用现有的option。

如何在带下划线的redux中返回新状态？

1 个答案: