Question

我是Redux的初学者，我做得很好，直到我开始实施新的东西，这有点重复。

我正在创建一个包含大量布尔值的商店。默认状态如下所示：

 const inventoryDefaultState = {
    items: {
        boltcutters: false,
        knife: false,
        spoon: false
    }
}

等等。有没有办法可以将它全部合并到一个减速器中，而不是基本上重复这种情况：

const inventoryReducer = (state = inventoryDefaultState, action) => {
    switch (action.type) {
        case 'PICK_UP_BOLTCUTTERS':
            return {
                ...state,
                items: {
                    ...state.items,
                    boltcutters: action.IsPickedUp
                }
            }
        default:
            return state;
    }
}

Idealy我希望它看起来像这样：

const inventoryReducer = (state = inventoryDefaultState, action) => {
    switch (action.type) {
        case 'PICK_UP_{ITEM-NAME}':
            return {
                ...state,
                items: {
                    ...state.items,
                    {ITEM-NAME}: action.IsPickedUp
                }
            }
        default:
            return state;
    }
}

我怎样才能实现这样的目标？

Answer 1

有许多方法可以提高减速器的可读性和效率。对于您的情况，我会尝试实施您的建议。

首先，您可以将项目名称添加到操作有效负载：

action.payload.itemName = 'spoon';

然后在reducer中你可以有一个适合所有项目的动作：

const inventoryRedcer = (state = inventoryDefaultState, action) => {
    switch (action.type) {
        case 'PICK_UP_ITEM':
            return {
                ...state,
                items: {
                    ...state.items,
                    [action.payload.itemName]: action.payload.IsPickedUp
                }
            }
        default:
            return state;
    }
}

如果您不熟悉[action.payload.itemName]语法，则会将其称为计算属性名称，您可以在其中随时向对象文字添加属性。有关here的更多信息。

减少Redux Reducer中的代码量

1 个答案: