Help us understand the problem. What is going on with this article?

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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away