[ReactJS] Persistance Redux

Redux의 state는 브라우져를 refresh하면 사라진다.
세션 정보(ex. jwt token)등을 유지 하기 위해서는 redux state를 저장해 둘 필요가 있어 redux-persis npm module을 사용해 구현해 보았다.

* 설치


$> npm install redux-persist

* 사용법

1. persist store 생성

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage/session';
import rootReducer from './reducers';

// storage는 session storage로 설정.
const persistConfig = {
    key: 'root',
    storage
};

// 기존 redux에 사용하던 root reducer를 persist reducer로 설정.
const persistedReducer = persistReducer(persistConfig, rootReducer);


// 기존 redux store를 root reducer가 아닌 persist reducer로 생성.
let store = createStore(persistedReducer);

// 기존 redux에 없던 부분인데 생성된 store로 persistor 생성.
let persistor = persistStore(store);

export { store, persistor };

2. persist store 사용

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './reducers/Store';
import { RootApp } from './pages';

ReactDOM.render(
    <Provider store={store}>
        // 기존 root app을 PersistGate로 감싸준다.
        <PersistGate loading={null} persistor={persistor}>
            <RootApp />
        </PersistGate>
    </Provider>,document.getElementById('root')
);
storage(localStorage, sessionStorage...)는 여러 가지가 있는데 session에서만 유지가 필요해서 session storage를 사용하였음. redux-persist 자세한 옵션들은 아래 사이트 참고. https://www.npmjs.com/package/redux-persist#nested-persists

댓글

이 블로그의 인기 게시물

[Protocol] WIEGAND 통신

Orange for Oracle에서 한글 깨짐 해결책

[UI] GNB·LNB·SNB·FNB 용어 설명