[react]redux-persist:storageにredux状態を保存

2202 ワード
React redux redux-persist テキストリンク
いいえ、reduxstateをstorageに保存するときに使用するredux-persistについて説明します.

設定方法


rootReducer.jsファイルで
import { persistReducer } from "redux-persist"
import storage from "redux-persist/lib/storage"

const persistConfig = {
  key: "root",
  storage,
  whiteList: ["cart"],
}
モジュールをロードし、構成設定を行います.
このときwhiteListとは永続化するモジュールを指す.
const rootReducer = combineReducers({
  user,
  cart,
  router: connectRouter(history),
})

export default persistReducer(persistConfig, rootReducer)
そして元にエクスポートしたRootReducerをPersisteReducerで包みます.
(料理を話しているような気がします)
また、Reduxを使用するProvider設定部では、
import { persistStore } from "redux-persist"
import { PersistGate } from "redux-persist/integration/react"

const persistor = persistStore(store)

<Provider store={store}>
  <PersistGate persistor={persistor}>
    <App />
  </PersistGate>
</Provider>,
モジュールを再読み込みすると、プロバイダでPersistGateを使用してRedux-Persist設定が完了します!

結果画面


このようにすべての設定を終了した後.

何度リフレッシュしても、redux stateは保存されています!
(簡単でしょ?)
Java Study 4week
TIL 50 Lifeループと条件付きレンダリング