ユーザーのログアウト時に Redux ストアの状態を効果的にリセットするにはどうすればよいですか?

Redux ストアでの状態リセットの処理

Redux は強力な状態管理ソリューションを提供し、アプリケーションが複雑なデータを効率的に管理できるようにします。ただし、ユーザーのログアウトやアプリケーションの初期化など、特定のシナリオでは、Redux ストアを初期状態にリセットする必要がある場合があります。

複数のユーザーが同じアプリケーションを共有し、各ユーザーが独自のキャッシュ データを保存しているシナリオを考えてみましょう。店。ユーザー 1 がログアウトした後、ユーザー 2 はブラウザを更新せずにログインします。これにより、ユーザー 2 にはユーザー 1 に関連付けられたキャッシュ データが残ります。

カスタム ルート リデューサー:

この問題に対処する 1 つのアプローチは、カスタム ルート リデューサーを作成することです。ルート リデューサーはアクションを個々のリデューサーに委任しますが、USER_LOGOUT アクションをインターセプトします。 USER_LOGOUT が発生すると、ルート リデューサーは初期状態に戻り、ストア全体を効果的にクリアします。

たとえば、このロジックを組み込んだルート リデューサーは次のようになります。

const appReducer = combineReducers({
  /* Your top-level application reducers */
});

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    return appReducer(undefined, action);  // Reset store to initial state
  }

  return appReducer(state, action);
};

このカスタム ルート リデューサーを使用して、USER_LOGOUT を呼び出すと、すべてのリデューサーがその初期値で初期化されます。

Redux Persist Reset:

redux-persist を使用している場合は、ユーザー 2 が白紙の状態から開始できるようにします。 redux-persist は通常、ストレージ エンジンの状態。ストレージ状態をリセットするには、適切なストレージ エンジンをインポートし、ログアウト時に各ストレージ状態キーをクリーンアップします。

const rootReducer = (state, action) => {
  if (action.type === 'SIGNOUT_REQUEST') {
    storage.removeItem('persist:root');
    // Remove other keys as needed

    return appReducer(undefined, action);  // Reset store to initial state
  }

  return appReducer(state, action);
};

このアプローチにより、必要に応じてストアと関連するストレージ データが初期状態にリセットされます。ユーザーがアプリケーションにログインし、独自の独立したデータを維持できるようにします。

以上がユーザーのログアウト時に Redux ストアの状態を効果的にリセットするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。