如何使用下划线在redux中返回一个新状态？

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。