[React+Typescript] Redux-Persist로 store 저장.ZIP

Redux-Persist는 상태를 유지하고 저장하는데 사용하는 라이브러리다.

 

새로고침하면 기존의 store가 사라지는 문제가 발생하기 때문에 Redux-Persist 라이브러리를 사용해

Redux 상태를 로컬 스토리지에 저장하고 새로고침이나 페이지가 리로드 할 때도 상태를 보존할 수 있다.(저장)

 

먼저 터미널에 명령어를 입력해 설치해준다.

npm i redux-persist

 

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

redux-persist

 

나는 채팅을 만드는 과정에서 redux-persist를 사용하는데 파일 구성은

 

• src/index.tsx (App 컴포넌트에 store를 저장하기 위해)
• src/store/index.tsx (상태 관리)

store/index.tsx

const reducers = combineReducers({
  user: userSlice,
});

 

Reducer를 결합하여 하나의 Root Reducer를 만들어 준다.

나는 userSlice 리듀서를 'user' 키로 사용했다.

const persistConfig = {
  key: 'root',
  storage,
};

 

persistConfig는 redux-persist에서 사용하는 객체다. 'key'는 저장소에서 사용하는 키, 'storage'는 데이터를 저장할 수 있는데 나는 로컬 스토리지를 사용한다. (key와 storage는 필수 객체)

const persistedReducer = persistReducer(persistConfig, reducers);

 

persistReducer(persisConfig, reducer)는 persisConfig가 추가된 reducer를 반환한다.

export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== 'production',
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }),
});

 

configureStore 함수를 사용하여 Redux store를 생성한다.

reducer에는 persistedReducer를 사용하고 개발 도구는 production 환경에서는 비활성화 되도록 설정했다.

또한, serializableCheck: false 로 기본 미들웨어에서 불필요한 체크를 비활성화 했다.

 

export const useAppDispatch = () => useDispatch();
export const useAppSelector = useSelector;

 

React-redux에서 제공하는 useDispatch와 useSelector 훅을 각각 useAppDispatch와 useAppSelector로 내보내고,

컴포넌트 내에서 Redux store에 쉽게 접근할 수 있도록 설정했다.

 

전체 코드

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { useDispatch, useSelector } from 'react-redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import userSlice from './userSlice';

const reducers = combineReducers({
  user: userSlice,
});

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== 'production',
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }),
});

export const useAppDispatch = () => useDispatch();
export const useAppSelector = useSelector;

 

src/index.tsx

root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </PersistGate>
  </Provider>
);

 

마지막으로 이렇게 index.tsx를 감싸주면 로컬 스토리지에 저장되는 걸 확인할 수 있다!

 

 

Redux DevTools에서도 확인 가능 :ㅇ