Adding multiple objects to the store in redux

Question

I've written an API call that returns all of a user's elements in an array.

I've written part of a reducer (it doesn't fully work yet, hence the question marks below) that looks like this:

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 and elementsMap looks like the following:

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

I'm struggling to add the additional N elements coming back from the API call to the elementsMap and would love some help here, I think I've gotten the adding to visibleElements piece down.

Thanks for taking a look

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

I wouldn't also do any logic on the output object, I would do it as I showed above. Otherwise, code looks messy. But that's just my opinion

Answer 2

Try this:

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