redux-persist

redux를 사용하면서 서브페이지에서 새로고침시 글로벌상태값이 날라가는 경우가 생겼다. 이를 해결하기위해 글로벌상태값을 localStroge | sesstionStorage에 저장하는 redux-persist를 알아보자

1. persistConfig를 작성하여 persistReducer에 기존 rootReducer와 합쳐준다
2. 1에서 합쳐준 persisted를 creatStore에 rootReducer대신에 넣어주어 store를 생성해준다
3. 만들어진 store를 persistStore에 넣어 persistStore를 생성해준다.

// store.js
import { persistReducer, persistStore } from "redux-persist";
import storage from "redux-persist/lib/storage"; // localStorage를 사용하기위해 storage를 import
import {rootReducer} from "./reducer"

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

const persisted = persistReducer(persistConfig, rootReducer);

export const store = createStore(
  persisted,
  composeWithDevTools(applyMiddleware(thunk))
);
//결론적으로 persistorStore를 사용함.
export const persistor = persistStore(store);

위에서 만들어진 persistStore를 index.js에서 PersistGate에 props로 넘겨준다.

//index.js
import { store, persistor } from "./redux/store";
import { PersistGate } from "redux-persist/integration/react";

ReactDom.render(
  <>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
          <App />
      </PersistGate>
    </Provider>
  </>,

  document.getElementById("root")
);