Добавление / удаление из массива не вызывает повторного рендеринга через Redux

Question

У меня сейчас проблема с добавлением / уменьшением массива с помощью приставки. Просто чтобы убедиться, что мое состояние избыточности работает, я жестко закодировал значения и он срабатывает каждый раз, когда я нажимаю кнопку.

Код, который работает:

import * as actionType from '../actions/ActionType';

const counterReducer = (state = [], action) => {
  let newState = [];
  switch (action.type) {
    case actionType.ADD_FILTER:
      if (!state.includes(action.payload)) {
        return newState = ['test'];
      }
      return newState = ['test'];
    default:
      return state;
  }
};

export default counterReducer;

Код, который не запускает рендеринг:

import * as actionType from '../actions/ActionType';

const counterReducer = (state = [], action) => {
  let newState = [];
  switch (action.type) {
    case actionType.ADD_FILTER:
      if (!state.includes(action.payload)) {
        const current = state;
        current.push(action.payload);
        return newState = current;
      }
      return newState = state;
    default:
      return state;
  }
};

export default counterReducer;

Магазин редукса однако обновляет? Помощь

Answer 1

Код, который не работает, причина в том, что вы изменяете свое состояние (используя метод push для массива, который имеет ссылку на старое состояние), и этот редукс не будет регистрироваться как изменение, потому что вы снова передаете ссылка старого государства. Читайте о клонировании массивов и методе срезов.

const current =state.slice();
current.push(action.payload)
return current

Теперь, когда у вас есть правильный клон, верните этот массив. Это вызовет повторную визуализацию.

Кроме того, первый случай работает, потому что вы всегда создаете новый массив и его ссылку.