- npm install
npm install @reduxjs/toolkit react-redux
- create folder and files
/lib/stores.ts
,lib/features/cart-slice.ts
/lib/stores.ts
:
import { configureStore } from "@reduxjs/toolkit";
export const store = configureStore({
reducer: {
}
});
lib/features/cart-slice.ts
:
import {createSlice, Payload} from "@reduxjs/toolkit";
type CartState = {
uid: string
cuisineList: Cart[]
}
// define initial state type
type InitialState = {
value: CanvasRect;
}
// create object containing all states
const initialState = {
value: {
uid: "",
cuisineList: []
}
}
export const cart = createSlice({
name: "cart",
initialState,
reducers: {
addIntoCart: (state, action: PayloadAction<Cuisine>) => {
const cuisineList = [...state.cuisineList];
cuisineList.push(action.payload);
return {
value: {
uid: state.uid,
cuisineList
}
}
},
clearCart: () => initialState
}
});
export const { addIntoCarts, clearCart } = cart.actions;
export default cart.reducer
/lib/stores.ts
:
import { configureStore } from "@reduxjs/toolkit";
export const store = configureStore({
reducer: {
}
});
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
/lib/provider.tsx
'use client'
import { useRef } from 'react'
import { Provider } from 'react-redux'
import { makeStore, AppStore } from '../../../lib/store'
export default function StoreProvider({ children }: {
children: React.ReactNode
}) {
const storeRef = useRef<AppStore>()
if (!storeRef.current) {
// Create the store instance the first time this renders
storeRef.current = makeStore()
}
return <Provider store={storeRef.current}>{children}</Provider>
}
import { addIntoCart, clearCart } from "@/lib/features/cart-slice";
import { useDispatch } from "react-redux";
import { useAppSelector } from "@/lib/stores";
expot default function Page() {
const dispatch = useDispatch<AppDispatch>();
// to dispatch action
dispatch(addIntoCart({...}));
// use the variable stored in redux
const carts = useAppSelector((state: ) => state.cartReducer.value.carts);
}