☰

Redux ストアの状態をリセットするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript redux
Redux ストアの状態をリセットするにはどうすればいいですか? 質問する

状態管理に Redux を使用しています。
ストアを初期状態にリセットするにはどうすればいいですか?

たとえば、2 つのユーザー アカウント (u1とu2) があるとします。
次のような一連のイベントを想像してください。

  1. ユーザーがu1アプリにログインして何かを行うと、一部のデータがストアにキャッシュされます。

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

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

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

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

ベストアンサー1

それを実現する 1 つの方法は、アプリケーションにルート リデューサーを記述することです。

ルート リデューサーは通常、アクションの処理を によって生成されたリデューサーに委任しますcombineReducers()。ただし、USER_LOGOUTアクションを受け取るたびに、初期状態をもう一度返します。

たとえば、ルート リデューサーが次のようになっているとします。

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ここで、アクションに応じて初期状態を返すようにnew に教える必要がありますUSER_LOGOUT。ご存知のとおり、リデューサーは、アクションに関係なく、最初の引数として呼び出されたときに初期状態を返すことになっています。この事実を利用して、に渡すときにundefined累積された を条件付きで削除してみましょう。stateappReducer

 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);
};

おすすめ記事