Redux-persist

Redux-persist란?

redux는 store를 종료하면 저장되어 있던 모든 상태가 없어진다.
따라서 캐시 기능을 구현하는 또 다른 장치가 필요하다.
그 작업을 지원해주는 라이브러리가 redux-persist이다.

redux의 store와 localstorage를 동시에 관리해줌으로써, 아무리 새로고침을 해도 localstorage에 영구적으로 저장이 되어있으므로 값들이 날라가지 않는다!

이제 간단하게 적용해보도록 하자

• 프로젝트 셋팅

$ npx create-react-app persisted-counter
$ cd persisted-counter

• 라이브러리 설치

$ yarn add --save redux react-redux redux-persist

• src/reducers/counter.reducer.js 에서 counterReducer 작성

// Action Types
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

// Action Creators
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

const initialState = {
  number: 0,
};

export default function counter(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        number: state.number + 1,
      };
    case DECREMENT:
      return {
        ...state,
        number: state.number - 1,
      };
    default:
      return state;
  }
}

• src/reducers/index.js 에서 rootReducer 작성

import { combineReducers } from "redux";
import counter from "./counter.reducer";

const rootReducer = combineReducers({
  counter,
});

export default rootReducer;

• 리듀서가 완성되면 store/index.js 파일에서 스토어를 만들어줌

import { createStore } from "redux";
import rootReducer from "../reducers";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
};

const enhancedReducer = persistReducer(persistConfig, rootReducer);

export default function configureStore() {
  const store = createStore(enhancedReducer);
  const persistor = persistStore(store);
  return { store, persistor };
}

• Counter 생성

import React from "react";

const Counter = (props) => {
  const { number, increment, decrement } = props;

  const handleIncrease = () => {
    increment();
  };

  const handleDecrease = () => {
    decrement();
  };

  return (
    <>
      <div>{number}</div>
      <div>
        <button onClick={handleIncrease}>+</button>
      </div>
      <div>
        <button onClick={handleDecrease}>+</button>
      </div>
    </>
  );
};

export default Counter;

• CounterContainer 생성

import { connect } from "react-redux";
import Counter from "../components/Counter";
import { increment, decrement } from "../reducers/counter.reducer";

const mapStateToProps = (state) => ({
  number: state.counter.number,
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement()),
});

const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);

export default CounterContainer;

• index.js 생성

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { PersistGate } from "react-redux/integration/react";
import configureStore from "./store";

const { store, persistor } = configureStore();

const Root = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

ReactDOM.render(<Root />, document.getElementById("root"));

export default Root;

• App.js 생성

import React from "react";
import CounterContainer from "./containers/CounterContainer";

const App = () => {
  return (
    <div>
      <h1>Persisted Counter</h1>
      <CounterContainer />
    </div>
  );
};

export default App;

• error 발생 부분
  

해결방법 : configureStore가 선언은 되었지만 값이 읽히지 않는 오류였다.

const Root위에 const { store, persistor } = configureStore(); 를

추가하여 값이 읽히게 만들었다.

해결방법 : Module not found: Can't resolve 'react-redux/integration/react' in 'C:\Users\vter7\Desktop\pr
actice_react\persisted-counter\src'

모듈이 없다는 오류가 발생했다

경로 설정이 잘못이었다.

redux-persist/integration/react로 설정했어야 하는데

react-redux/integration/react로 설정했어야했다.

앞으로 오타를 잘 확인하자!

• 실행결과

새로 고침을 해도 상태가 유지되는 것을 확인 할 수 있다.