Состояние Redux изменяется, но не перерисовывается

Question

Я пытаюсь удалить карту из своего списка. Состояние в Redux Dev Tools обновлено, но пользовательский интерфейс не отображается. Не знаете почему?

Эта логика редуктора изменяет мое существующее состояние?

Пробовал проверять с помощью componentWillReceiveProps, заметил при удалении карты, новыйProps не изменился.

В редуктор

    const listReducerDefaultState = [
  {
    title: "title",
    id: `list0`,
    cards: [
      {
        id: `card0`,
        title: "card 1"
      },
      {
        id: `card1`,
        title: "card 2"
      }
    ]
  },
  {
    title: "title",
    id: `list1`,
    cards: [
      {
        id: `card2`,
        title: "card 1"
      },
      {
        id: `card=3`,
        title: "card 2"
      },
      {
        id: `card=4`,
        title: "card 3"
      },
      {
        id: `card=5`,
        title: "card 4"
      }
    ]
  }
];

.... 

case "DELETE_CARD": {
      const { ListID } = action.payload;
      const CardID = action.payload.id;
      let newState = state;

      let index = newState.findIndex(item => item.id === action.payload.ListID);
      newState[index].cards = newState[index].cards.filter(
        ({ id }) => id !== CardID
      );
      // console.log(newState);
      return newState;
    }

Действие

export const deleteCard = ({ id, ListID }) => ({
  type: "DELETE_CARD",
  payload: { id, ListID }
});

Answer 1

Попробуйте

case "DELETE_CARD":
  {
    const {
      ListID,
      id: CardID
    } = action.payload;

    return state.map((item) => {
      if (item.id === ListID) {
        return ({
          ...item,
          cards: item.cards.filter(({ id }) => id !== cardID)
        })
      }

      return item;
    });

, чтобы избежать изменения состояния.

Answer 2

let newState = state;

является виновником. Это мутирует исходное состояние. Вся логика в редукторе должна быть неизменной.

попробуйте использовать это:

const newState = {...state};