时间戳

首页 > 解决方案 > 如何使用下划线在 redux 中返回新状态？

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

问题描述

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

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)}
        ];
    }
};

似乎我分配了新创建的对象并返回新状态而不改变原始状态，但是当我记录它们时，原始状态也发生了变化。

任何提示将不胜感激！

标签： reactjsreduxunderscore.js

解决方案

state看起来它应该是一个带有options数组的对象？

这是一个非变异版本：

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

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

推荐阅读