Edited at

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

More than 1 year has passed since last update.


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情報が保存されます。

スクリーンショット 2018-03-11 0.33.16.png



スクリーンショット 2018-03-12 7.09.01.png

逆に、ブラウザをリロードしたり、ブラウザを再起動してアプリを起動すると、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`は保存しない
}


サンプルコード

https://github.com/galoi/redux-persist-sample

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

# ホームディレクトリに移動

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