redux-persist

0. 기존 코드

// store.ts

import { configureStore } from '@reduxjs/toolkit';
import usersReducer from './usersSlice';
import authReducer from './authSlice';

export const store = configureStore({
  reducer: { users: usersReducer, auth: authReducer },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './Router';
import { Provider } from 'react-redux';
import { store } from './store/store';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  // <React.StrictMode>
  <Provider store={store}>
    <RouterProvider router={router} />
  </Provider>
  // </React.StrictMode>
);

1. redux-persist 설치

$ yarn add redux-persist @types/redux-persist

2. combineReducers

// store.ts

import { combineReducers } from "@reduxjs/toolkit";

const reducers = combineReducers({
  users: usersReducer,
  auth: authReducer,
});

3. config 작성 & persistReducer

// store.ts

import { combineReducers } from "@reduxjs/toolkit";
import storage from 'redux-persist/lib/storage';

const reducers = combineReducers({
  users: usersReducer,
  auth: authReducer,
});

const persistConfig = {
  key: 'root', // 저장되는 값에 대한 식별자
  storage, // 로컬스토리지에 저장, 그 외 SessinStorage, AsyncStorage
  whitelist: ['users', 'auth'], // target: reducer 이름 기입
};

const persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
  reducer: persistedReducer,
});

export const persistor = persistStore(store);

4. PersistGate

// index.tsx

import { persistor } from './store/store';
import { PersistGate } from 'redux-persist/integration/react';

<PersistGate loading={null} persistor={persistor}>
  <RouterProvider router={router} />
</PersistGate>

5. 완성 코드

// store.ts

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import usersReducer from './usersSlice';
import authReducer from './authSlice';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';

const reducers = combineReducers({
  users: usersReducer,
  auth: authReducer,
});

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['users', 'auth'],
};

const persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
  reducer: persistedReducer,
});

export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './Router';
import { Provider } from 'react-redux';
import { store, persistor } from './store/store';
import { PersistGate } from 'redux-persist/integration/react';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  // <React.StrictMode>
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <RouterProvider router={router} />
    </PersistGate>
  </Provider>
  // </React.StrictMode>
);

* non-serializable value error 해결

1. redux-logger & redux-thunk 설치

$ yarn add redux-logger redux-thunk
$ yarn add @types/redux-logger --dev

2. middleware 추가

// store.ts

import logger from 'redux-logger';
import thunk from 'redux-thunk';

export const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk, logger],
});

또는

// store.ts

import logger from 'redux-logger';
import thunk from 'redux-thunk';

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: true,
      serializableCheck: false,
    }).concat(thunk, logger),
});

• 짧은 버전은 짧고 간단하게 사용 가능

• 긴 버전은 기본 미들웨어 설정을 수정할 수 있기 때문에 더 유연한 컨트롤 가능