[ReactJS] Persistance Redux
Redux의 state는 브라우져를 refresh하면 사라진다.
세션 정보(ex. jwt token)등을 유지 하기 위해서는 redux state를 저장해 둘 필요가 있어 redux-persis npm module을 사용해 구현해 보았다.
$> npm install redux-persist
세션 정보(ex. jwt token)등을 유지 하기 위해서는 redux state를 저장해 둘 필요가 있어 redux-persis npm module을 사용해 구현해 보았다.
* 설치
$> npm install redux-persist
* 사용법
storage(localStorage, sessionStorage...)는 여러 가지가 있는데 session에서만 유지가 필요해서 session storage를 사용하였음. redux-persist 자세한 옵션들은 아래 사이트 참고. https://www.npmjs.com/package/redux-persist#nested-persists1. 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') );
댓글
댓글 쓰기