[TIL/React] 2023/10/17

reference: https://www.npmjs.com/package/redux-persist

Redux-Persist ✍️

배경 🟠

프로젝트 진행 중(=쇼핑 카트 목록 페이지), 새로고침에 의해 데이터가 초기화된다는 문제점을 발견했다. Redux-Persist는 브라우저에 데이터를 저장할 수 있도록 돕는다.

이커머스 사이트의 '장바구니 목록' 또는 '다크모드' 등, 유저의 개인정보 유출에 영향을 미치는 데이터가 아니라면, 브라우저에 해당 데이터를 저장하여 사용하는 것이 더 유리하겠다.

따라서 본 TIL에서는 Redux-Persist가 제공하는 API 몇 가지를 살펴보고 기초적인 사용법에 대해 기술하겠다. 추가적으로 어제까지 시도한 shopping cart에 대한 전반적인 로직을 정리하도록 하겠다.

구조 🟠

// 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 }
}

위 코드는 기본적으로 프로젝트의 store.js 파일에 입력될 내용이다. API에 대해서는 차후 살펴볼 예정이니, 구조부터 확인하겠다.

persistConfig라는 객체가 선언되어 있고 내부에는 'key:'root''와 'storage'가 있다. 이 객체를 persistReducer라는 함수에 첫 번째 인자로 전달하고 있다. 두 번째 인자에는 rootReducer가 있다.

persistReducer 함수를 persistedReducer에 저장하고, persistedReducer를 createStore 함수를 통해 store에 할당한 모습이다.

추가적으로 persistStore라는 함수에 위 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>
  );
};

루트 컴포넌트를 위 코드처럼 PersistGate로 감싸면 최종적으로 데이터가 브라우저에 저장된다.

API 🟠

persistReducer() 🟢

persistReducer()는 두 개의 인자(=config, store)를 받는다.

config obj

config 객체는 Redux-Persist에 대한 설정을 포함하는 객체다. key는 Redux 상태를 식별할 때 사용할 key다. storage는 저장소 유형(=로컬 스토리지, 세션 스토리지)을 의미한다.

localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage', session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session'를 작성하면 된다.

요약하자면 persistReducer()는 Redux-Persist에 대한 설정을 포함하는 객체인 config를 전달받아서, Redux 상태를 지속적으로 저장하고 복원할 수 있도록 하는 새로운 reducer를 반환하는 함수라고 할 수 있다.

persistStore() 🟢

persistReducer()를 통해 persist에 대한 설정이 적용된 reducer를 만들었다. persistStore()는 해당 내용을 담아서, persist에 대한 설정이 적용된 store를 생성한다. 'persistStore(store)'는 persistor 객체다.

persistor obj 🟢

persistor 객체는 Redux Persist의 persistStore 함수로부터 반환되며, 상태를 영구적으로 저장하고 복원하기 위한 여러 유용한 메서드를 제공한다. purge, flush, pause, persist가 있는데 본 글에서는 자세히 다루지 않도록 하겠다. 유용한 메서드가 있다는 점만 알아두고 넘어가자.

total 관련 로직 ✍️

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;

이제 진짜 완벽하게 기능을 구현했다. 하지만 내일이 시험이기에...

view까지 완벽하게 구성해서 최종적으로 정리하도록 하겠다!