javascript - Redux - 如何从状态中删除 Prop ？

Question

我正在创建一个 React/Redux 应用程序来为 Angular 色扮演游戏制作 Angular 色，并且我希望能够在玩家状态中添加和删除技能。

我目前删除技能的方式如下:

const initState = {
    activeSkills: {},
    knowledgeSkills: {},
    skillPointsSpent: 0
}

const skillReducer = (state=initState, action) => {
    var {category, name} = action.parameter

    const actionsToTake = {
        ...//other actions

        DECREMENT_SKILL: () => {
            var newState;

            if(state[category][name].rating === 1) {
                newState = Object.assign(
                    {},
                    state,
                    {
                        skillPointsSpent: state.skillPointsSpent - 1
                    }
                );

                delete newState[category][name];
            }

            return newState
        },

        ...//other actions
    }

    return (actionsToTake[action.type] || actionsToTake.DEFAULT)();
}

我正在减少的状态应该看起来像这样，我正在尝试删除 Archery。因此类别将为 activeSkills，名称将为 Archery

state = {
    activeSkills: {
         Archery: {rating: 1, spec: 'Bow'}
    },
    knowledgeSkills: {},
    skillPointsSpent: 1
}

这显然是错误的做法，因为它改变了我之前的状态。那么从状态对象中删除属性的不可变方法是什么？

Answer 1

编辑

就像 @flup 链接中的更新一样，处理此问题的更好方法是使用一些对象解构。

if(state[category][name].rating === 1) {
    const { [name]: discard, ...newCategory } = state[category];
    newState = {
        ...state,
        [category]: {
            ...newCategory
        },
        skillPointsSpent: state.skillPointsSpent - 1
    }
}

原创

喜欢这个答案@flup linked to我所需要做的就是制作更深层次嵌套对象的副本，然后我可以删除该属性而不改变以前的状态。

if(state[category][name].rating === 1) {
    newState = Object.assign(
        {},
        state,
        {
            [category] : Object.assign(
                {},
                state[category]
            ),
            skillPointsSpent: state.skillPointsSpent - 1
        }
    );

    delete newState[category][name];
}