替换深层子对象，同时在 React 中保持状态不可变

Question

我是 react 和 redux 的新手。我有一个对象是一个子对象数组，其中包含数组

const initialState = {
    sum: 0,
    denomGroups: [
        {
            coins: [
                { name: 'Penny', namePlural: 'Pennies', label: '1¢', value: .01, sum: 0 },
                { name: 'Nickel', namePlural: 'Nickels', label: '5¢', value: .05, sum: 0 },
                { name: 'Dime', namePlural: 'Dimes', label: '10¢', value: .10, sum: 0 },
                { name: 'Quarter', namePlural: 'Quarters', label: '25¢', value: .25, sum: 0 }
            ]
        },
        {
            bills: [
                { name: 'Dollar', namePlural: 'Dollars', label: '$1', value: 1, sum: 0 },
                { name: 'Five', namePlural: 'Fives', label: '$5', value: 5, sum: 0 },
                { name: 'Ten', namePlural: 'Tens', label: '$10', value: 10, sum: 0 },
                { name: 'Twenty', namePlural: 'Twentys', label: '$20', value: 20, sum: 0 },
                { name: 'Fifty', namePlural: 'Fiftys', label: '$50', value: 50, sum: 0 },
                { name: 'Hundred', namePlural: 'Hundreds', label: '$100', value: 100, sum: 0 }
            ]
        }
    ]
};

我有一个动作，它传递了一个值和面额的名称

export function increaseSum(value, denom) {
    return { type: types.ADD_TO_SUM, value: value, denom: denom }
}

在我的 reducer 中，我编写了一个帮助类来识别这个面额在对象中的位置：

function findDenomination(denoms, action) {
    let denomMap = {},
        currentDenom = {};
    for (let i = 0; denoms.length >= i + 1; i++) {
        let denomGroup = denoms[Object.keys(denoms)[i]];
        for (var key in denomGroup) {
            if (!currentDenom.length) {
                currentDenom = denomGroup[key].filter(x => x.name === action.denom);
                if (currentDenom.length > 0) {
                    denomMap.group = i;
                    denomMap.key = key;
                    denomMap.index = denomGroup[key].findIndex(x => x.name === action.denom);
                }
            }
        }
        if (currentDenom.length > 0) {
            break;
        }
    }
    return denomMap;
}

在reducer 本身中，我使用Object.assign 制作denomGroups 的深层副本，我认为以一种我认为使其不可变的方式。

function countableItems(state = initialState, action) {
    switch (action.type) {
        case types.ADD_TO_SUM:
            let denomMap = findDenomination(state.denomGroups, action);
            state.denomGroups = Object.assign({}, state.denomGroups, state.denomGroups[denomMap.group][denomMap.key][denomMap.index].sum = parseFloat(action.value));
            return state;
        default:
            return state;
    }
}

任何人都清楚为什么这会被标记为错误：A state mutation was detected inside a dispatch

Answer 1

你试图改变一个不可变的。因此出现错误。

不可变对象的全部意义在于，不可变对象在创建后永远不应更改其内部的任何位置。这就是为什么所有改变它的函数都会创建一个不可变的新实例。如果您尝试更改不可变内部的某些内容，那仍然是突变，因此很糟糕。

这确保您可以只检查对象本身的相等性，而不必进行深入检查，并确保数据完整性。

你应该做的只是改变它（如果你使用immutables库，你可以使用setIn），这将创建一个新的地图。你可以打电话给state。

类似这样的：

case types.ADD_TO_SUM:
    const denomMap = findDenomination(state.denomGroups, action);
    return state.setIn(['denomGroup', denomGroup.key, denomGroup.index, sum], parseFloat(action.value));