[프리온보딩] 기업과제 #7 (4주차) - [Redux-persist] 새로고침해도 store값이 남아있게 도와주는 redux-persist (with redux-toolkit)

Redux-Persist

React의 Redux-Persist를 사용하면 새로고침을 해도 데이터가 지속적으로 유지된다.

CRA 설치

# Redux + Plain JS template
npx create-react-app my-app --template redux

기존

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

사용방법

내프로젝트에 적용해보기

🦴store.js

import { configureStore } from '@reduxjs/toolkit';
import { createLogger } from 'redux-logger';
import accountsSlice from './accountsSlice';
import userSettingSlice from './userSettingSlice';
import usersSlice from './usersSlice';
import { persistReducer } from 'redux-persist';
import { combineReducers } from 'redux';
import storage from 'redux-persist/lib/storage';

export const reducers = combineReducers({
  users: usersSlice,
  userSetting: userSettingSlice,
  accounts: accountsSlice,
});

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

const logger = createLogger();
const persistedReducer = persistReducer(persistConfig, reducers);

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(logger),
});

export default store;

🦴index.js

사용방법

내코드에 적용

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ThemeProvider, CssBaseline } from '@mui/material';
import theme from './styles/theme';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './modules/store';
import TokenStorage from './common/utils/token';
import Auth from './common/utils/auth';
import ApiService from './api/api';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';

let persistor = persistStore(store);

const tokenStorage = new TokenStorage();
const auth = new Auth(tokenStorage);
export const apiservice = new ApiService(tokenStorage);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <BrowserRouter>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <App auth={auth} token={tokenStorage} />
        </PersistGate>
      </Provider>
    </BrowserRouter>
  </ThemeProvider>
);