Best way to share state between slices in redux toolkit? - reactjs

Question

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?