Storeの永続化にredux-persistを使う #React

redux-persistとは

主に、次の機能によって、Storeの状態を永続化します。

ReduxのStoreの状態（State）を localStorage （Web）や、 AsyncStorage （react-native）などのStorageに保存する
Storageに保存した状態をアプリ起動時に読み込ませる

事前準備

redux-persistのインストール

yarnが使える環境ならば、適用したいプロジェクトのルートで次のコマンドを実行し、redux-persistをインストールします。

yarn add redux-persist

使い方

基本的な使い方を紹介します。

永続化の設定

/src/configureStore.js

import { createStore } from 'redux'
import { persistReducer, persistStore } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import rootReducer from './reducers'

// 永続化の設定
const persistConfig = {
  key: 'root', // Storageに保存されるキー名を指定する
  storage, // 保存先としてlocalStorageがここで設定される
  whitelist: ['todos'] // Stateは`todos`のみStorageに保存する
  // blacklist: ['visibilityFilter'] // `visibilityFilter`は保存しない
}

// 永続化設定されたReducerとして定義
const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = createStore(
  persistedReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export const persistor = persistStore(store)
export default store

`PersistGate`でルートcomponentをラップ

/src/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'

import App from './components/App'
import store, { persistor } from './configureStore'

// persistor.purge() これを実行すると、Storageに保存された情報がクリアされる

render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

アプリを起動し、StoreにStateが保存されると、同期的にStorageにもState情報が保存されます。

↓

逆に、ブラウザをリロードしたり、ブラウザを再起動してアプリを起動すると、Storageに保存された情報がStoreのStateに反映されます。

Storageのクリア

persistor = persistStore(store)によってオブジェクトを生成し、persistor.purge()を実行すると、Storageに保存された情報がクリアされます。

保存する/しないStateを指定

永続化の設定で、whitelistおよびblacklistを指定することによって、それぞれ保存する、保存しないStateを任意に設定することができます。

const persistConfig = {
  key: 'root', // Storageに保存されるキー名を指定する
  storage, // 保存先としてlocalStorageがここで設定される
  whitelist: ['todos'] // Stateは`todos`のみStorageに保存する
  // blacklist: ['visibilityFilter'] // `visibilityFilter`は保存しない
}

サンプルコード

下記を実行することで、直ぐに試すことができます。

# ホームディレクトリに移動
cd ~/
# サンプルコードをclone
git clone https://github.com/galoi/redux-persist-sample
# プロジェクトのルートに移動
cd redux-persist-sample
# 必要なライブラリをインストール
yarn
# アプリを起動
yarn start

Storeの永続化にredux-persistを使う