Redux-Persist로 state 유지하기
2621 단어 redux-persiststoragereduxredux
Redux는 새로고침시 state가 사라진다. 여기에 필요한 것이 Redux-Persist이다. Redux-Persist를 이용하면 캐시 기능과 같이 상태 값을 저장할 수 있다.
Redux-Persist 라이브러리 설치
$ npm install --save redux-persist
사용 예시)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';
import store from './store/store';
import { Provider } from 'react-redux';
import '@fortawesome/fontawesome-free/js/all.js';
import { persistStore } from "redux-persist"; // 해당 라인 추가
import { PersistGate } from "redux-persist/integration/react"; // 해당 라인 추가
const persistor = persistStore(store); // 해당 라인 추가
const Root = () => (
<Provider store={store}>
<PersistGate persistor={persistor}> // 해당 라인 추가
<App />
</PersistGate> // 해당 라인 추가
</Provider>
);
ReactDOM.render(<Root />, document.getElementById("root"));
src/reducer/index.js
import { combineReducers } from "redux";
import { persistReducer } from "redux-persist"; // 해당 라인 추가
import storage from "redux-persist/lib/storage"; // 해당 라인 추가
import loginReducer from "./loginReducer";
const rootReducer = combineReducers({
loginReducer,
}); // 추가
const persistConfig = {
key: "root",
storage,
whitelist: ["loginReducer"]
}; // 추가
export default persistReducer(persistConfig, rootReducer); // 해당 라인 추가
Author And Source
이 문제에 관하여(Redux-Persist로 state 유지하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dormahd114/Redux-Persist로-state-유지하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)