Redux - redux-persist 세팅

 

 

이번 포스팅에서는 redux-persist 패키지를 사용해서 브라우저의 LocalStorage에 상태값을 저장해 놓고 사용하는 방법에 대해 알아보고자 한다. Redux가 세팅되어 있다는 가정 하에 redux-persist만 추가해보도록 하자.

 

Redux를 사용해 상태 관리를 할 경우 store에 상태값을 넣어놓고 사용하게 된다. 하지만 Redux의 store는 페이지를 새로고침 할 경우 state가 초기값으로 되돌아가게 된다. 이것에 대한 대응 방안으로 LocalStorage에 저장하고자 하는 state를 저장하여 새로고침을 해도 저장공간에 있는 데이터를 Redux에 불러올 수 있는 방법을 사용한다. 그리고 이러한 역할을 수행해주는 라이브러리가 redux-persist 이다.

👉 설치 

npm install redux-persist

 

👉 Store/useStore.jsx -> persist store 사용 

// Store/useStore.jsx

import { createStore, compose, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import rootReducer from '../reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
import createSagaMiddleware from 'redux-saga' // redux -> object createSagaMiddleware()
import rootSaga from '../sagas'

import { persistStore } from 'redux-persist'
// persist 전용 store를 만들기 위함.

import { PersistGate } from 'redux-persist/integration/react'
// persist와 관련된 정보를 전역에서 관리하기 위해,
// react-redux의 Provider와 같은 것을 만들어 주기 위함.

const sagaMiddleware = createSagaMiddleware()
const middleware = [sagaMiddleware]
const enhancer = process.env.NODE_ENV === 'production'
? compose(applyMiddleware(...middleware)) // 배포모드
: composeWithDevTools(applyMiddleware(...middleware)) // 개발모드 

const store = createStore(rootReducer,enhancer) // rootReducer , enhancer
sagaMiddleware.run(rootSaga) // sagas/index.js

const persistor = persistStore(store)  // persist 전용 store

const Store = ({children}) => {
    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                {children}
            </PersistGate>
        </Provider>
    )
}

export default Store

 

👉 reducers/index.js -> reducer에 persist store를 정의 

import { combineReducers } from "redux";
import { persistReducer } from 'redux-persist'  // reducer가 실행될 때 persist도 묶어서 사용.
import storage from 'redux-persist/lib/storage'  // localStorage에 저장하기 위함.
import counter from './counter.js'
import user from './user.js'

// config
// localStorage의 key, value
const persistConfig = {
    key: 'user',  // localStorage에 저장될 때의 key값.
    storage,
    whitelist: ['user']  // store에 있는 user reducer만 localStorage에 저장하겠다는 의미.
}
// persist가 store에 있는 user reducer만을 localStorage에 저장.
// localStorage에 있던 값을 store 안의 user reducer의 initialState 값으로 넣어준다.

const rootReducer = combineReducers({
    counter,
    user
})

export default persistReducer(persistConfig, rootReducer)
// rootReducer와 persist를 묶어서 사용.
// persist와 관련된 reducer를 만들어준 것.

추가설명 )

redux-persist를 사용해서 localStorage에 state를 저장할 경우, 페이지가 새로고침 되어도 initialState 값이 localStorage에 저장된 state로 대체되기 때문에 state가 초기화되지 않는다.