[Redux] Redux-Persist

redux-persist

• Redux 의 store 페이지는 새로고침 할 경우 state 가 날아감
• ex) application 만들면서 localhost 에 화면 띄우고 작업을 하게 되는데,
  이때 새로고침을 눌러보면 application 은 최초의 코드로 돌아감
  특히, state 에 변화된 내용들도 initial state 로 다시 돌아가게 됨
• 하지만 실제로 운영되고 있는 인터넷 쇼핑몰 사이트에 로그인 후 장바구니에 상품들을 추가했을 때, 새로고침을 해도 그대로 view 에 나타나는 것을 볼 수 있음
• 이처럼 localStorage 또는 session 에 저장하고자 하는 reducer state 를 저장하여 새로고침 해도 해당 저장공간에 있는 데이터를 redux 에 불러오는 형식이 바로 redux-persist !
• 즉, redux에서 localStorage 와 sessionStorage 에 접근할 수 있는 기능을 제공하는 library

1. 설치

yarn add redux-persist

2. reducer 에 persist store 정의

// src > modules > index.ts
import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
// localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage';
// session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session';
import etcReducer from "./etcSlice";
// (...이하 생략)

const persistConfig = {
	key: "accToken", // Storage 에 저장할 때의 key 값 지정
	storage, // localStorage 에 저장
	whitelist: ["etcReducer"] // reducer 중에 "etcReducer" 만 저장 // 스토리지에 저장할 리덕스 모듈을 나열한다.
	// blacklist: ["해당 리듀서"] // 스토리지에 저장하지 않을 리덕스 모듈을 나열
}

const rootReducer = combineReducers({
	etcReducer,
	...
})

export default persistReducer(persistConfig, rootReducer);
// persistReducer 함수 안에 persistConfig 와 rootReducer 를 넣어서 export default
// 이 뜻은 수정된 rootReducer 를 persistConfig 의 조건에 맞게 persist 하여 export 
// rootReducer 에 persist 능력을 추가해준 것
// 즉, redux-persist와 리덕스 모듈 정보를 종합하여 persist 정보를 반환

3. persist store 사용

// src > index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { configureStore } from '@reduxjs/toolkit'; // 여기선 따로 store.tsx 에 import 하지 않고 바로 index.tsx 에서 정의
import rootReducer from "./modules";
import { persistStore } from "redux-persist"; // redux store 생성
import { PersistGate } from "redux-persist/integration/react"; // redux store 에 유지시키고자 하는 데이터들이 정상적으로 저장되고 불러올 수 있도록 UI 렌더링을 지연시키는 역할 
// PersistGate 로 루트 컴포넌트 감싸서 사용 
// loading: UI 렌더링 지연시간. null 값으로 지정할 수 있으며, 단위는 ms
// persistor: 스토어 내용이 정의된 변수를 대입

// (...이하 생략)

// redux store 정의
const store = configureStore({
	reducer: rootReducer,
	(...이하 생략)
});

// redux store 생성
const persistor = persistStore(store);

// (...생략)

const container = document.getElementById('root')!;
const root = createRoot(container);

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

4. redux store 에 데이터 저장 > 새로고침 하여 데이터가 유지되는지 확인하면 성공!

[참고]

Usage With TypeScript | Redux Toolkit

redux-persist

redux-persist 사용법, react-redux 사용법, redux, react, react16, state management, flux, store, reducer, dispatch, action