开发者问题收集

Redux - InitialState - 数组与对象问题

2021-10-11
171

我的 InitialState 有问题,错误隐藏在某处。当我将 InitialState 保存在数组中时,所有这些东西都正常工作(* NOTES.TS 是一个对象数组)。但是当我尝试将其设为对象时,它似乎根本不起作用。找不到问题出在哪里……

const INITIAL_STATE: any[] = [...NOTES];

export const reducer = (state: any[] = INITIAL_STATE, action: any) => {
  switch (action.type) {
    case UPDATE_NOTE: {
      return state.map((note) =>
        note.id === action.payload.id
          ? {
              ...note,
              status: "ARCHIVED",
            }
          : note
      );
    }

    case CREATE_NOTE: {
      return state.concat([
        {
          description: 'jj',
          id: 12,
          status: NOTE_STATUS.ACTIVE,
          timestamp: CURRENT_DATE,
          images: [],
          username: "John Smith",
        },
      ]);
    }

    default:
      return state;
  }
};

export default reducer;

以及选择器中的过滤器:

const globalSelector = (state: any) => state.notes;

export const selectCurrentNotes = createSelector(globalSelector, (notes) => {
  return notes.filter((p: any) => p.status === NOTE_STATUS.ACTIVE);
});

但我需要向 InitialState 添加更多内容,所以我决定将其设为对象,但实际上什么都不起作用。为什么?

const INITIAL_STATE: any = {
     all: [...NOTES],
     description: '',
     images: []
};

export const reducer = (state: any = INITIAL_STATE, action: any) => {
  switch (action.type) {
    case UPDATE_NOTE: {
      return state.all.map((note) =>
        note.id === action.payload.id
          ? {
              ...note,
              status: "ARCHIVED",
            }
          : note
      );
    }

    case CREATE_NOTE: {
      return state.all.concat([
        {
          description: 'jj',
          id: 12,
          status: NOTE_STATUS.ACTIVE,
          timestamp: CURRENT_DATE,
          images: [],
          username: "John Smith",
        },
      ]);
    }

    default:
      return state;
  }
};

export default reducer;

以及选择器中的过滤器:

const globalSelector = (state: any) => state.notes.all;

export const selectCurrentNotes = createSelector(globalSelector, (notes) => {
  return notes.filter((p: any) => p.status === NOTE_STATUS.ACTIVE);
});

编辑:第一个错误涉及过滤器:

TypeError: undefined is not an object (evaluating 'notes.filter')

编辑 2:过滤器中的 notes 是 Reducer 的名称,与其他名称一起存储在全局存储中。

const Reducers = CombineReducers({ Favourites, Notes, Notifications, });

2个回答

您的 Reducer 返回了不同的类型,我认为这不是您想要的。例如:

return state.all.map((note) =>
    note.id === action.payload.id
      ? {
          ...note,
          status: "ARCHIVED",
        }
      : note
  );

这只是返回您状态的更新的 all 属性。相反,您可能想要:

const newAll = state.all.map((note) =>
  note.id === action.payload.id
    ? {
        ...note,
        status: "ARCHIVED",
      }
    : note
);

return {...state, all: newAll };

您需要针对 Reducer 的所有部分修复此问题,以确保每次都返回完整状态。

DemiPixel
2021-10-11

因为在您的 Reducer 中您执行了 return state.all.map ,它将使用映射的注释数组覆盖对象状态。

您需要执行

export const reducer = (state: any = INITIAL_STATE, action: any) => {
  switch (action.type) {
    case UPDATE_NOTE: {
      return {
        ...state,
        all: state.all.map((note) =>
        note.id === action.payload.id
          ? {
              ...note,
              status: "ARCHIVED",
            }
          : note
         )};
    }

    case CREATE_NOTE: {
      return {
        ...state,
        all: state.all.concat([
        {
          description: 'jj',
          id: 12,
          status: NOTE_STATUS.ACTIVE,
          timestamp: CURRENT_DATE,
          images: [],
          username: "John Smith",
        },
      ])
      };
    }

    default:
      return state;
  }
};
Gabriele Petrioli
2021-10-11