Почему store меняется а страница не рендерится?

Question

[mr jeery]

Смотрю через devTools, в store заполняется все как надо, но страница не изменяется, только если обновить компонент самому. Я нарушаю философию redux по неизменяемости ? Как это сделать правильно ?

const INITIAL_STATE = {
  cards: [
    entries: [
    ]
  ]
};


const addEntry = (state, action) => {
  let newState = state;
  let cardIndex = newState.cards.findIndex((card)=>card.id == action.id);

  newState.cards[cardIndex].entries.push({ entry: '', idEntry: Math.random().toString(36).substring(7) })

  return {
    cards: newState.cards
    }
}

Answer 1

[0xD34F]

Вы возвращаете тот же самый массив cards (и тот же самый элемент cards, и то же самое свойство entries обновляемого элемента cards), что и был, поэтому изменений как бы и не было. Делайте копии:

const addEntry = (state, action) => {
  const cards = [...state.cards];
  const index = cards.findIndex(n => n.id === action.id);
  const card = {...cards[index]};
  card.entries = [ ...card.entries, { id: Math.random().toString(36).substring(7) } ];
  cards[index] = card;
  return { cards };
};

Кстати, я правильно понимаю, что

const addEntry = (state, action) => {

- это не весь редьюсер, а эта функция вызывается внутри редьюсера? Как-то так, да?