[解決済み] Reduxストアの状態をリセットする方法とは？

質問

状態管理にReduxを使っています。
ストアを初期状態に戻すにはどうすればよいですか？

例えば、2つのユーザー・アカウント( u1 と u2 ).
次のような一連の流れを想像してください。

1. ユーザー u1 がアプリにログインして何かをするので、ストアにいくつかのデータをキャッシュします。

2. ユーザー u1 がログアウトします。

3. ユーザー u2 は、ブラウザを更新せずにアプリにログインします。

この時点で、キャッシュされたデータには u1 そして、それをクリーンアップしたいと思います。

最初のユーザーがログアウトしたときに、Reduxストアを初期状態に戻すにはどうすればよいですか？

解決方法は？

一つの方法としては、アプリケーションにroot reducerを書くことでしょう。

ルートリデューサは通常、アクションの処理を combineReducers() . しかし USER_LOGOUT アクションを実行すると、初期状態に戻ってしまう。

例えば、root reducerがこんな感じだったとします。

const rootReducer = combineReducers({
  /* your app’s top-level reducers */
})

にリネームすることができます。 appReducer を書き、新たに rootReducer に委ねる。

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  return appReducer(state, action)
}

あとは、新しい rootReducer に応答して初期状態を返すようにする。 USER_LOGOUT アクションを使用します。ご存知のように リデューサーは undefined を第一引数にとります。この事実を利用して、条件付きで蓄積された state に渡すと appReducer :

 const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    return appReducer(undefined, action)
  }

  return appReducer(state, action)
}

では、いつでも USER_LOGOUT が起動すると、すべてのリデューサが新たに初期化されます。また、リデューサーは action.type を追加した。

繰り返しになりますが、新しいコードの全容は次のようになります。

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    return appReducer(undefined, action)
  }

  return appReducer(state, action)
}

を使用している場合 redux-persist また、ストレージを整理する必要があるかもしれません。Redux-persistはストレージエンジンにステートのコピーを保持し、リフレッシュ時にそこからステートのコピーが読み込まれます。

まず、適切な ストレージエンジン を設定する前に状態をパースし、それを undefined を作成し、各ストレージステートキーをクリーニングします。

const rootReducer = (state, action) => {
    if (action.type === SIGNOUT_REQUEST) {
        // for all keys defined in your persistConfig(s)
        storage.removeItem('persist:root')
        // storage.removeItem('persist:otherKey')

        return appReducer(undefined, action);
    }
    return appReducer(state, action);
};