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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 18.02.2023

Я столкнулся с проблемой написания приложения (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.

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

reactjs typescript redux

Источник: Stack Overflow на русском

Answer 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>

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

Ответы