Блог

Я пытаюсь ввести новое значение в состояние хранилища. При первом нажатии на кнопку «Добавить элемент» все работает нормально, но во второй раз я получил следующую ошибку: « state.basket.push is not a function «. Я настраиваю действие для регистрации состояния в консоли и получаю следующие результаты:

1-й щелчок: {…}{basketItems: Array [ «44» ]}

2-й щелчок: объект {basketItems: 0 }

Почему тип переменной меняется с array на int?

Вот код для отображаемого компонента:

 function Counter({ basketItems,additem }) {

  return (
    <div>
      <button onClick={additem}>Add item</button>
    </div>
  );
}

const mapStateToProps = state => ({
  basketItems: state.counterReducer.basketItems,
});

const mapDispatchToProps = dispatch => {
  return {
    additem: ()=>dispatch({type: actionType.ADDITEM, itemName:'Dummy text'  }),

  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);
 

И редуктор выглядит так:

 import {ADDITEM} from "../actions/types";

const initialState = { basket: [], };

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case ADDITEM:
      console.log(state);
      // let newBasket = state.basket.push('44');
      return { 
        ...state,
        basket: state.basket.push('44')
        };
    default:
      return state;
  }
}
 

Я копирую состояние перед обновлением корзины, чтобы предотвратить странное поведение.

Здесь есть две проблемы:

• state.basket.push() изменяет существующий state.basket массив, что недопустимо в Redux
• Он также возвращает новый размер массива, а не фактический массив

Итак, вы не выполняете правильное неизменяемое обновление и возвращаете значение, которое не является массивом.

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

 return {
  ...state,
  basket: state.basket.concat("44")
}
 

Сказав это, вы действительно должны использовать наш официальный пакет Redux Toolkit, который позволит вам значительно упростить логику редуктора и исправлять подобные ошибки.