Redux-persist
Install
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>
);