[TIL/React] 2023/10/17

// configureStore.js
 
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
 
import rootReducer from './reducers'
 
const persistConfig = {
  key: 'root',
  storage,
}
 
const persistedReducer = persistReducer(persistConfig, rootReducer)
 
export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

import { PersistGate } from 'redux-persist/integration/react'
 
// ... normal setup, create store and persistor, import components etc.
 
const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { splitPrice } from "../utils/commonModule";

export const getCartData = createAsyncThunk(
  "cart/getCartData",
  async (action) => {
    console.log(action);
    try {
      return action;
    } catch (error) {
      console.error("Error: ", error);
      throw error;
    }
  }
);

export const deleteCardData = createAsyncThunk(
  "cart/deleteCardData",
  async (productId) => {
    try {
      return productId;
    } catch (error) {
      console.error("Error: ", error);
      throw error;
    }
  }
);

export const updateTotalPriceAndQuantity = createAsyncThunk(
  "cart/updateTotalPriceAndQuantity",
  async (_, { getState }) => {
    const state = getState();
    const { cartProduct } = state.cart;

    const { totalPrice, totalQuantity } = cartProduct.reduce(
      (acc, item) => {
        acc.totalPrice += splitPrice(item.price) * item.count;
        acc.totalQuantity += item.count;
        return acc;
      },
      { totalPrice: 0, totalQuantity: 0 }
    );

    return { totalPrice, totalQuantity };
  }
);

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    cartProduct: [],
    totalPrice: 0,
    totalQuantity: 0,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getCartData.fulfilled, (state, action) => {
      const { category, id, count } = action.payload;
      const existingProductIndex = state.cartProduct.findIndex(
        (product) => product.category === category && product.id === id
      );
      if (existingProductIndex !== -1) {
        state.cartProduct[existingProductIndex].count += count;
      } else {
        state.cartProduct.push(action.payload);
      }
    });

    builder.addCase(deleteCardData.fulfilled, (state, action) => {
      const { id, category } = action.payload;
      const deleteIndex = state.cartProduct.findIndex(
        (product) => product.category === category && product.id === id
      );
      if (deleteIndex !== -1) {
        state.cartProduct.splice(deleteIndex, 1);
      }
    });

    builder.addCase(updateTotalPriceAndQuantity.fulfilled, (state, action) => {
      const { totalPrice, totalQuantity } = action.payload;
      state.totalPrice = totalPrice;
      state.totalQuantity = totalQuantity;
    });
  },
});

export default cartSlice.reducer;