Я столкнулся с проблемой написания приложения (Shopping Cart) на React и TypeScript в качестве компилятора для проверки типов.
Я хочу удалить элементы из store , нажав 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.
Что я делаю не так?