320x100
반응형
새로고침을 하면 리덕스 store의 state가 날라가는 문제가 있었는데 redux persist 를 이용해서 문제를 해결할 수 있다
이 라이브러리를 사용하면 store의 state를 localstorage나 session에 저장해놓고 불러올 수 있어서, 새로고침을 해도 데이터가 사라지지 않는다
npm i redux-persist
reducer에 적용
- localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage
- session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session
- persisConfig
- key가 root로 되있으면 맨 윗쪽 파일부터 적용한다는 의미이다.
- storage에 저장할 지, session에 저장할 지 정할 수 있다.
- whitelist로 사용할 reducer를 넣는다. 해당 코드에서는 word 라는 이름으로 reducer들을 받아왔으므로 word를 사용하게 했다.
- blacklist로 해당하는 reducer만 제외하고 사용하게 할 수 있다.
// configStore.js
import { createStore, combineReducers, applyMiddleware } from 'redux';
import word from './modules/word';
import thunk from "redux-thunk";
💎 import { persistReducer } from "redux-persist";
💎 import storage from "redux-persist/lib/storage";
💎const persistConfig = {
key: "root",
storage,
whitelist: ["data"]
};
// reducer를 뭉친것을 rootReducer 라고 정해준다.
// reducer는 여러개 있을 수 있으므로 하나로 뭉쳐주는 작업이다.
const rootReducer = combineReducers({ data });
// persistReducer와 reducer를 뭉쳐놓은 덩어리를 같이 합쳐준다.
💎 const perReducer = persistReducer(persistConfig, rootReducer);
// 뭉쳐진 리듀서들을 넣어서 스토어를 만들어준다.
// 리듀서뿐만 아니라 미들웨어나 필요한 것들도 같이 넣을 수 있다.
// 미들웨어 묶어주기
const middlewares = [thunk];
// 미들웨어를 하나씩 풀어서 넣어준다.
const enhancer = applyMiddleware(...middlewares);
// 리듀서+optional들을 넣어서 스토어를 만들어준다.
const store = createStore(perReducer, enhancer);
export default store;
persist 가 적용된 store 적용
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/configStore';
💎 import { persistStore } from "redux-persist";
💎 import { PersistGate } from "redux-persist/integration/react";
💎const persistor = persistStore(store);
ReactDOM.render(
<Provider store={store}>
💎 <PersistGate loading={null} persistor={persistor}>
<BrowserRouter>
<App />
</BrowserRouter>
</PersistGate>
</Provider>,
document.getElementById('root')
);
728x90
반응형
'React' 카테고리의 다른 글
useEffect 와 useLayoutEffect (0) | 2023.01.15 |
---|---|
Intersection Observer API 과 무한스크롤 구현 (0) | 2023.01.08 |
redux-toolkit (0) | 2022.12.19 |
Fragment/Portal (0) | 2022.12.04 |
Custom Hooks와 코드 분할/React.lazy()와 Suspense (0) | 2022.11.29 |