在redux中向存储中添加多个对象

Question

我已经编写了一个API调用，它返回数组中的所有用户元素。

我已经写了一个reducer的一部分(它还不能完全工作，所以下面有问号)，看起来像这样：

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'],
};

我正在努力添加从elementsMap的API调用返回的额外的N个元素，我想我已经得到了添加到visibleElements的部分的帮助。

感谢您的关注

Answer 1

试试这个：

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

Answer 2

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

我也不会在输出对象上做任何逻辑，我会像上面展示的那样做。否则，代码看起来会很混乱。但这只是我的观点