0

Я столкнулся с проблемой написания приложения (Shopping Cart) на React и TypeScript в качестве компилятора для проверки типов.

Я хочу удалить элементы из store , нажав Remove all

Я пытаюсь удалить все предметы из магазина, нажав на кнопку "Remove all"

Код из файла cartSlice где данные

*import { createSlice } from '@reduxjs/toolkit';

interface IDeleteItem {
   type: 'DELETE_ITEM';
}

interface IAddItem {
   type: 'ADD_ITEM';
}

type Action = IDeleteItem | IAddItem;

const initialState = {
   quantity: 0,
   totalPrice: 0,
   list: [

      {
         id: 1,
         img: 'https://static.nike.com/a/images/t_default/0d82a8f5-561e-4f12-bac9-c4102e75b8c7/custom-nike-air-force-1-high-by-you-shoes.png',
         title: 'Nike Shoes',
         price: '240$',
      },

      {
         id: 2,
         img: 'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/dd933288-973b-46ee-b983-f8fa0cb41a90/custom-nike-air-force-1-mid-by-you-shoes.png',
         title: 'Nike Shoes',
         price: '200$',
      },
   ],
};

const productsSlice = createSlice({
   name: 'products',
   initialState,
   reducers: {
      removeAll: (state = initialState) => {
         state.list = [];
      },
   },
});

export const { removeAll } = productsSlice.actions;

export default productsSlice.reducer;

Код из файла, где я хочу зделать dispatch *

import './CartHeader.scss';

import { useAppDispatch } from '../../hooks/hooks';

import { removeAll } from 'store/cartSlice';
<div className="cart__header">
      <h1 className="cart__header-title">Shopping Cart</h1>
      <p className="cart__header-delete" onClick={useAppDispatch(removeAll())}>
          Remove All
      </p>
</div>

export default CartHeader;

И я получаю ошибку

Actions must be plain objects. Use custom middleware for async actions.

Что я делаю не так?

1 ответ 1

0
import { useAppDispatch } from '../../hooks/hooks';
import { removeAll } from 'store/cartSlice';

const dispatch = useAppDispatch()

const onRemoveAll = () => dispatch(removeAll())

<div className="cart__header">
  <h1 className="cart__header-title">Shopping Cart</h1>
  <p className="cart__header-delete" onClick={onRemoveAll}>
      Remove All
  </p>
</div>
1
  • В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в Справке. 3 мар в 5:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.