I am using @reduxjs/toolkit and reactjs to build a shopping cart, and when I export the actions from Cart.js and try to import them into other files like cart.jsx and header.jsx, it says :

and when check the CONSOLE after clicking on the addTocart button which call the imported action of addToCart, it says:

this is cart.js (located in redux folder) code:

import { createSlice } from "@reduxjs/toolkit";

export const cartSlice = createSlice({
  name: "cart",
  initialState: {
    cartProds: []
    },
  reducers: {
    addToCart: (state, {payload})=>{
       const exist = state.cartProds.find(prod => prod.id === payload.id);
       if(exist){
            return  state.cartProds.map(prod => prod.id === payload.id ? {...prod, quantity: prod.quantity + 1}: prod);
       }
       if(!exist){
        return  state.cartProds = [...state, {...payload, quantity: 1}];
       }
    },
    removeFromCart :(state, {payload}) =>{
        const exist1 = state.find( prod => prod.id === payload.id);
        if(exist1.quantity === 1){
            return state.filter(prod => prod.id !== exist1.id);
        }else{
            return state.map(prod => prod.id === payload.id ? {...prod, quantity:prod.quantity-1}: prod);
        }
    }
  }
});

export const { addTocart, removeFromCart } = cartSlice.actions;
export default cartSlice.reducer;

and this is the way I imported them (the path is absolutely correct ! ):

import { addToCart, removeFromCart } from '../redux/cart.js';