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

ユーザーのログアウト時に Redux ストアの状態をリセットする

Redux では、ストアはアプリケーションの状態を維持します。ユーザーがログアウトしたときにストアが初期状態にリセットされるようにすることは、キャッシュの問題やデータ汚染を防ぐために不可欠です。

これを実現するには、カスタム ルート リデューサーを作成するアプローチが 1 つあります。これは、アクションの処理を、combineReducers() によって生成されたリデューサーに委任します。ただし、USER_LOGOUT アクションが発生すると、初期状態が返されます。

次のような rootReducer があると仮定します。

const rootReducer = combineReducers({
  // Your app's top-level reducers
});

その名前を appReducer に変更し、 appReducer に委任する新しい rootReducer:

const appReducer = combineReducers({
  // Your app's top-level reducers
});

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

次に、 rootReducer は、USER_LOGOUT アクションを受信したときに初期状態を返します。 Reducer は、アクションのタイプに関係なく、最初の引数として unfineed を指定して呼び出された場合に初期状態を返すことが知られています。この動作を利用できます:

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

  return appReducer(state, action);
};

この変更により、すべての Reducer は USER_LOGOUT 時に再初期化され、オプションで action.type に基づいて異なる状態を返すことができます。

Ifアプリケーションは redux-persist を使用しているため、保存された状態もクリアする必要がある場合があります。

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

    return appReducer(undefined, action);
  }

  return appReducer(state, action);
};

このアプローチにより、ユーザーがログアウトすると、メモリ内の Redux ストアと保存された状態の両方がリセットされ、後続のユーザー セッションではクリーンな状態が維持されます。

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