Ошибка при создании функции удаления в приложении Todo Redux: TypeError: state.byIds.filter не является функцией

Question

Я пытаюсь создать диспетчерскую функцию delete_TODO в redux и получаю сообщение об ошибке: «TypeError: state.byIds.filter не является функцией»

Я не совсем понимаю, почему кто-то может объяснить Я считаю, что это маленькая глупость, но я не вижу

import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "../actionTypes";

const initialState = {
  allIds: [],
  byIds: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case ADD_TODO: {
      const { id, content } = action.payload;
      return {
        ...state,
        allIds: [...state.allIds, id],
        byIds: {
          ...state.byIds,
          [id]: {
            content,
            completed: false,
          },
        },
      };
    }
    case TOGGLE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        byIds: {
          ...state.byIds,
          [id]: {
            ...state.byIds[id],
            completed: !state.byIds[id].completed,
          },
        },
      };
    }
   //here is the probleme
    case DELETE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        allIds: state.allIds.filter((todo) => todo !== id),
        byIds: state.byIds.filter((todo) => todo !== id),
      };
    }
    default:
      return state;
  }
}

Answer 1

state.byIds - это объект, а не массив, фильтр работает с массивом, а не с объектом. вам нужно сделать byIds массивом. Попробуйте это:

import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "../actionTypes";

const initialState = {
  allIds: [],
  byIds: [],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case ADD_TODO: {
      const { id, content } = action.payload;
      return {
        ...state,
        allIds: [...state.allIds, id],
        byIds: [
          ...state.byIds,
          [id]: {
            content,
            completed: false,
          },
        ],
      };
    }
    case TOGGLE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        byIds: [
          ...state.byIds,
          [id]: {
            ...state.byIds[id],
            completed: !state.byIds[id].completed,
          },
        ],
      };
    }
   //here is the probleme
    case DELETE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        allIds: state.allIds.filter((todo) => todo !== id),
        byIds: state.byIds.filter((todo) => todo !== id),
      };
    }
    default:
      return state;
  }
}

Answer 2

Вы имеете в виду, что ваше свойство byIds в исходном состоянии является типом массива вместо объекта, поскольку .filter не является частью прототипа буквального объекта?

const initialState = {
  allIds: [],
  byIds: [],
};