reactjs - Filtering array in redux doesn't change the array - Stack Overflow

admin管理员组

文章数量:1345707

I'am trying to remove item from array in redux by filtering it, but for some reason no matter what I do it just doesn't change anything in the array. But when I use methods like push or state.items = [] it works. Im out of ideas, can anyone help? I've seen other topics, but none of those solution works for me, like state.items = [...filtered]; or returning return state.items = filtered because I get error

Type '(state: WritableDraft<CartState>, action: { payload: CartItem; type: string; }) => WritableDraft<CartItem>[]' is not assignable to type 'CaseReducer<CartState, { payload: any; type: string; }> | CaseReducerWithPrepare<CartState, PayloadAction<any, string, any, any>>'. Type '(state: WritableDraft<CartState>, action: { payload: CartItem; type: string; }) => WritableDraft<CartItem>[]' is not assignable to type 'CaseReducer<CartState, { payload: any; type: string; }>'. Type 'WritableDraft<CartItem>[]' is not assignable to type 'void | CartState | WritableDraft<CartState>'

Here is my cartSlice

import { RootState } from "./../store";
import { PayloadAction } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";
import { ProductProps } from "../../types";

export interface CartItem {
  product: ProductProps;
  qty: number;
}

interface CartState {
  items: CartItem[];
}
const initialState: CartState = {
  items: [],
};

export const CartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart: (state, action: PayloadAction<CartItem>) => {
      state.items.push(action.payload);
    },
    deleteFromCart: (state, action: PayloadAction<CartItem>) => {
      const itemId = action.payload.product.id;
      const filtered = state.items.filter((item) => item.product.id === itemId);
      state.items = filtered;
    },
    clearCart: (state) => {
      state.items = [];
    },
  },
});

export default CartSlice.reducer;
export const { addToCart, deleteFromCart } = CartSlice.actions;

export const selectCart = (state: RootState) => state.cart;

Here is how the dispatch is called

import { ProductProps } from "../types";
import { MdDelete } from "react-icons/md";
import { useDispatch } from "react-redux";
import { deleteFromCart } from "../store/features/cartSlice";
import "../styles/cartModalProduct.scss";

const CartModalProduct = ({ item, amount }: { item: ProductProps; amount: number }) => {
  const dispatch = useDispatch();
  const getTotalPrice = () => {
    const price = parseInt(item?.price) * amount;
    return price;
  };
  return (
    <div className="cart-item my-4 gap-4 d-flex align-items-center mx-auto justify-content-center">
      <div className="cart-image-container col-md-3 col-12">
        <img src={item?.image} alt="" className="cart-image" />
      </div>
      <div className="text-container col-md-4 col-12">
        <div className="cart-item-name text-center text-md-start mt-3 mt-md-0">{item?.name}</div>
        <div className="cart-item-price-container d-flex justify-content-center justify-content-md-start mt-2 mt-md-0">
          <div className="cart-item-price ms-1"> {item?.price} zł</div>
        </div>
      </div>
      <div className="quantity-container col-md col-12 d-flex justify-content-center justify-content-md-start mt-2 mt-md-0">
        <span className="mt-2 cart-item-quantity-change d-flex">
          <span className="pointer">-</span>
          <span className="mx-4">{amount}</span>
          <span className="pointer">+</span>
        </span>
      </div>
      <div className="cart-item-total-price col-md col-12 text-center text-md-start mt-3 mt-md-0">
        {getTotalPrice()} zł
      </div>
      <div onClick={() => dispatch(deleteFromCart({ product: item, qty: 0 }))}>
        <MdDelete size={40} />
      </div>
    </div>
  );
};

export default CartModalProduct;

本文标签： reactjsFiltering array in redux doesn39t change the arrayStack Overflow