批量更新标准化 Redux 状态

Raz*_*azz 5 javascript reactjs redux

假设我有这样的标准化状态(使用normalizr)

entities: {
  todos: {
    'aaa': {
      id: 'aaa',
      text: 'Todo A',
      completed: false
    },
    'bbb': {
      id: 'bbb',
      text: 'Todo B',
      completed: false
    },
    'ccc': {
      id: 'ccc',
      text: 'Todo C',
      completed: false
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

然后我有一个从服务器获取 ID 数组的操作,该操作已完成。对于该操作类型,我有这样的减速器:

const todos = (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.FETCH_COMPLETED_SUCCESS:
      return {
        ...state,
        todos: action.payload.completedIds.map((id) => {
          return {
            [id]: {
              ...state.todos[id],
              completed: true
            }
          }
        })
      };
    default:
      return state;
  }
};
Run Code Online (Sandbox Code Playgroud)

如果我收到一个包含 ['aaa', 'ccc'] 的数组(现实世界应用程序中可能有数千个项目),我想在单个操作中将这些相应待办事项的“已完成”设置为 TRUE,这可能吗?

我当前的减速器实现不起作用,因为它返回一个对象数组,而原始规范化状态是以 ID 作为键的对象。

谢谢。

Shu*_*tri 3

您可以将修改后的待办事项存储在一个对象中,然后使用扩展语法更新它,例如

const todos = (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.FETCH_COMPLETED_SUCCESS:
      let newTodos = {};
      action.payload.completedIds.forEach((id) => {
          newTodos[id]: {
              ...state.todos[id],
              completed: true
            }
          })
        })
      return {
        ...state,
        todos: {
             ...state.todos,
             ...newTodos
        }
      };
    default:
      return state;
  }
};
Run Code Online (Sandbox Code Playgroud)