redux-toolkit으로 장바구니에 담은 아이템들이 목록에 추가 하는 기능을 구현 하긴 했는데 store의 state가 새로고침 하면 날아가는 큰 난관이 생겼다. 뭐 당연한거지만..

그래서 찾은게 redux-persist이다.

사용법

npm install redux-persist

store.js

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import user from './store/userSlice.js'
import cart from './store/cartSlice.js'

// 로컬스토리지에 저장하고 싶은 경우
import storage from "redux-persist/lib/storage";
// 세션스토리지에 저장하고 싶은 경우
import storageSession from "redux-persist/lib/storage/session"

import {persistReducer} from "redux-persist";

const persistConfig = {
    key: "root",
    // cart만 저장 (전부 저장 원할시 = whitelist 제거)
    whitelist: ["cart"],
    storage,
}

const reducer = combineReducers({
    user : user.reducer,
    cart : cart.reducer
})

const persistedReducer = persistReducer(persistConfig, reducer);

export default configureStore({
    reducer: persistedReducer   
})

redux-persist 사용 전 store.js

import { configureStore } from '@reduxjs/toolkit'
import user from './store/userSlice.js'
import cart from './store/cartSlice.js'

export default configureStore({
    reducer: {
        user : user.reducer,
        cart : cart.reducer
    }
})

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux';
import store from './store.js'
import {PersistGate} from "redux-persist/integration/react"
import {persistStore} from "redux-persist"

const root = ReactDOM.createRoot(document.getElementById('root'));
let persistor = persistStore(store);

root.render(
    <Provider store={store}>
      <BrowserRouter>
        <PersistGate persistor={persistor}>
          <App />
        </PersistGate>
      </BrowserRouter>
    </Provider>
);

redux-persist 사용 전 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux';
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
);

redux-toolkit도 복잡한데 redux-persist까지 사용한다고 구글링하고 공식 문서를 봤지만 너~무 길고 복잡했다.

youtube에서 외국인 동영상 참고해서 해봤는데 운이 좋았어서 그런지 잘 되더라..

공식 문서에서는 이것저것 워낙 많이 설정하던데

그에 비해서 내가 추가한 코드가 짧은데도 불구하고 잘 작동하니까 무슨 차이 인지 너무 알고 싶다😭

이해하려고 해도 아직은 내가 부족하고도 부족한 것을 정말 많이 체감했다.