在 redux 中添加多个对象到 store

Question

我写了一个 API 调用，returns 一个数组中的所有用户元素。

我写了一个减速器的一部分（它还没有完全工作，因此下面有问号）看起来像这样：

export default function(state = defaultState, action) {
    switch (action.type) {
        case 'receiveElement':
            return {
                ...state,
                elementsMap: {
                    ...state.elementsMap,
                    [action.element.id]: action.element,
                },
                visibleElements: [...state.visibleElements, action.element.id],
            };
        case 'receiveAllElements':
            return {
                ...state,
                elementsMap: {
                    ...state.elementsMap,
                    **???**
                },
                visibleElements: [...state.visibleElements, ...action.elements.map((element, index) =>
                    `id-${element.id}`
                )],
            };
        default:
            return state;
    }
}

defaultState 和 elementsMap 如下所示：

const defaultState = {
    elementsMap: {
        'id-1': {id: 'id-1', shape: 'circle', title: 'Run for City Council'},
        'id-2': {id: 'id-2', shape: 'circle', title: 'NYU Law School'},
        'id-3': {id: 'id-3', shape: 'circle', title: 'Start Company'},
    },

    visibleElements: ['id-1', 'id-2', 'id-3'],
};

我正在努力添加从 API 调用返回的额外 N 个元素到 elementsMap 并且希望在这里得到一些帮助，我想我已经添加到 visibleElements 一块下来。

感谢观看

Answer 1

export default function(state = defaultState, action) {
    switch (action.type) {
        case 'receiveElement':
            return {
                ...state,
                elementsMap: {
                    ...state.elementsMap,
                    [action.element.id]: action.element,
                },
                visibleElements: [...state.visibleElements, action.element.id],
            };
        case 'receiveAllElements':
          let _visibleElements = [...state.visibleElements, ...action.elements.map((element, index) => `id-${element.id}`)]

            return {
                ...state,
                elementsMap: {
                    ...state.elementsMap,
                    **???**
                },
                visibleElements: _visibleElements,
            };
        default:
            return state;
    }
}

我不会对输出对象做任何逻辑，我会像上面那样做。否则，代码看起来很乱。但这只是我的意见

Answer 2

试试这个：

case 'receiveAllElements':
    var map = elements.reduce((res, i) => { res[i.id] = i; return res; }, {});

    return {
        ...state,
        elementsMap: {
            ...state.elementsMap,
            ...map
        },
        visibleElements: [...state.visibleElements, ...action.elements.map((element, index) =>
            `id-${element.id}`
        )],
    };

在 redux 中添加多个对象到 store

Adding multiple objects to the store in redux

javascript

reactjs

redux

react-redux