将多个对象添加到商店中使用REDO

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

我不会做也输出对象上的任何逻辑，我会做它，因为我上面显示。否则，代码看起来很乱。但是，这只是我的意见