Redux 状态条目哈希答案

【问题标题】：Redux state entry hashingRedux 状态条目哈希
【发布时间】：2021-05-05 19:30:19
【问题描述】：

我正在尝试在我的 redux 存储中存储一组数据，由 id 字段散列。

我的减速器看起来像：

// The initial state of the App
export const initialState = {
  events: {},
  loading: false,
  saving: false,
  error: false
};

const eventReducer = (state = initialState, action) =>
  produce(state, draft => {
    switch (action.type) {
      case LOAD_EVENT:
        draft.loading = true;
        draft.error = false;
        break;
      case LOAD_EVENT_SUCCESS:
        draft.loading = false;
        draft.events = {
          ...state.events,
          [action.id]: action.event
        };
        break;
      case LOAD_EVENT_ERROR:
        draft.loading = false;
        draft.error = action.error;
        break;
      case LOAD_PENDING:
        draft.loading = true;
        draft.error = false;
        break;
      case LOAD_PENDING_SUCCESS:
        draft.loading = false;
        draft.events = {
          ...state.events,
          ...action.events.map(entry => {
            return { [entry['id']]: entry };
          })
        };
        break;
      case LOAD_PENDING_ERROR:
        draft.error = action.error;
        draft.loading = false;
        break;
      case LOAD_UPCOMING:
        draft.loading = true;
        draft.error = false;
        break;
      case LOAD_UPCOMING_SUCCESS:
        draft.loading = false;
        draft.events = {
          ...state.events,
          ...action.events.map(entry => {
            return { [entry['id']]: entry };
          })
        };
        break;
      case LOAD_UPCOMING_ERROR:
        draft.error = action.error;
        draft.loading = false;
        break;
      case LOAD_PREVIOUS:
        draft.loading = true;
        draft.error = false;
        break;
      case LOAD_PREVIOUS_SUCCESS:
        draft.loading = false;
        draft.events = {
          ...state.events,
          ...action.events.map(entry => {
            return { [entry['id']]: entry };
          })
        };
        break;
      case LOAD_PREVIOUS_ERROR:
        draft.error = action.error;
        draft.loading = false;
        break;
    }
  });

action.event 看起来像 {id: 12, name: 'Test', ...} 和 action.events 将是像 [{id: 12, name: 'Test', ...}, {id: 15, name: 'Another test', ...}] 这样的数组。

但是，当我加载events 作为LOAD_PENDING_SUCCESS 操作成功的结果时，状态为：{events: {0: {12, {id: 12, name: 'Test', ...}}}, {1: {15: {id: 15, name: 'Another test', ...}}}}

我希望我的 events 将事件 ID 作为键，所以当我执行 = {...events, ...newEvents} 时，如果状态对象的 events 属性具有与来自 newEvents 的记录相同的 id 数据，则事件对象将被替换为来自 newEvents 的条目。

【问题讨论】：

标签： javascript redux react-redux

【解决方案1】：

你可以这样试试：

  case LOAD_PENDING_SUCCESS:
    draft.loading = false;
    draft.events = {
      ...state.events,
      ...action.events.reduce((acc, val) => {
        return { ...acc, [val.id]: val };
      }, {})
    };
    break;

或者，对于数据的规范化，您可以使用 normalizr 库。超级好用。

【讨论】：