Skip to content

Redux-persist

Install 

yarn add redux-persist

redux-toolkit 과 함께 적용 방법

src/stores/persist.ts 파일에 createPersistor 유틸리티 함수를 만든다: 

import {ReducersMapObject, configureStore, combineReducers} from '@reduxjs/toolkit';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  DEFAULT_VERSION,
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

export const DEFAULT_IGNORED_ACTIONS = [
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
];

export function createPersistor(
  key: string,
  reducers: ReducersMapObject<{}, any>,
  version = DEFAULT_VERSION,
  ignoredActions = DEFAULT_IGNORED_ACTIONS
) {
  const persistConfig = {key, version, storage};
  const rootReducer = combineReducers(reducers);
  const persistedReducer = persistReducer(persistConfig, rootReducer);

  const store = configureStore({
    reducer: persistedReducer,
    middleware: getDefaultMiddleware =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions,
        },
      }),
  });

  const persistor = persistStore(store);

  return {store, persistor};
}

src/stores/store.ts 파일에 위에서 만든 함수와 등록할 리듀서를 추가한다. 

import {createPersistor} from './persist';
import {workReducer} from './apis/work';  // 사용자가 직접 만든 리듀서 API

export const DEFAULT_PERSIST_KEY = 'steel:inspection';
export const {store, persistor} = createPersistor(DEFAULT_PERSIST_KEY, {
  work: workReducer,
});

이후, #PersistGate 항목을 참조하여 App.js에 반영한다.

PersistGate

src/App.js에 Redux#Provider의 안쪽에 #PersistGate를 사용하여 퍼시스트를 적용한다. 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './plugins/chart/register';
import {router} from './routes/router';
import {store, persistor} from './stores/store';
import {RouterProvider} from 'react-router-dom';
import {Provider} from 'react-redux';
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>
);

See also