1

If I have a slice like this

cartSlice.js

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

const initialState = {
  cartItems: cartItems,
  amount: 1,
  total: 0,
  isLoading: true,
};

export const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    clearCart: (store) => {
      store.cartItems = [];
    },
    removeItem: (store, action) => {
      store.cartItems = store.cartItems.filter(
        (item) => item.id !== action.payload
      );
    },
    increase: (store, action) => {
      const target_item = store.cartItems.find(
        (item) => item.id === action.payload.id
      );
      target_item.amount++;
    },
    decrease: (store, { payload }) => {
      const target_item = store.cartItems.find(
        (item) => item.id === payload.id
      );
      target_item.amount--;
    },
    calculate: (store) => {
      let amount = 0;
      let total = 0;
      store.cartItems.forEach((item) => {
        amount += item.amount;
        total += item.amount * item.price;
      });
      store.amount = amount;
      store.total = total;
    },
  },
});

export const { clearCart, removeItem, increase, decrease, calculate } =
  cartSlice.actions;
export default cartSlice.reducer;

How do I implement something like this?

checkoutSlice.js

const initialState = {
  purchasedItems: [],
  checkoutIsOpen: false,
};

const { cartItems, amount } = useSelector((store) => store.cart);  <--HYPOTHETICALLY

const checkoutSlice = createSlice({
  name: "checkout",
  initialState,
  reducers: {
    addToCheckout: (state) => {
      if (amount >= 1) {  <------HERE
        state.purchasedItems.push(cartItems); <---HERE
      }
    },
    openCheckout: (state) => {
      state.checkoutIsOpen = true;
    },
  },
});

export const { addToCheckout, openCheckout } = checkoutSlice.actions;
export default checkoutSlice.reducer;

You can't use selectors, what else is left? I've read a ton of previous posts that say it's not possible, but then how do you create functional websites with components that interact with each other? Like in this case with basic shopping app with a checkout cart, how do you get the selected items into the checkout cart? It's just not possible? That doesn't make sense because isn't that basic core functionality of a website? Why wouldn't redux allow this? I feel like there has to be a way.

I think I'm fundamentally misunderstanding here.

Any help? How do I accomplish this?

Eric Andre
  • 204
  • 2
  • 9
  • I have not implemented myself but I think the way to go is with createAsyncThunk and dispatch your action as second parameter. You can read more about here. https://redux-toolkit.js.org/api/createAsyncThunk – MaxCode Aug 30 '22 at 06:53
  • Any reason why you don't have everything in the same slice? Slices are usually much more suited to independent parts of the state. – Guillaume Brunerie Aug 30 '22 at 06:55
  • Not sure which previous posts you claim to have read, but the solutions given are usually: 1) add data from other slices as arguments to action creators or 2) move state into the same slice. The concept of slices (or having multiple reducers) is just an abstraction to structure global state for big applications. If you discover that state is correlated (checkout and cart) but not co-located (different slices), you're free to merge state back together (if approach 1) doesn't work for you). – timotgl Aug 30 '22 at 07:01

0 Answers0