Redux

Question

我的 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 是减速器的名称，与其他减速器一起存储在全局存储中。

const reducers = combineReducers({ 最爱，笔记，通知， });

Answer 1

因为在你的 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;
  }
};

Answer 2

您的减速器正在返回不同的类型，我认为这不是您想要的。例如：

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

您需要为减速器的所有部分修复此问题，以确保每次都返回完整状态。

Redux - InitialState - 数组与对象问题

Redux - InitialState - array vs object issue

reactjs