Question

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

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

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

试试这个：

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

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

在redux中将多个对象添加到商店

2 个答案: