사용자 로그아웃 시 Redux Store 상태를 올바르게 재설정하는 방법은 무엇입니까?

사용자 로그아웃 시 Redux 스토어 상태 재설정

Redux에서는 스토어가 애플리케이션의 상태를 유지합니다. 캐싱 문제와 데이터 오염을 방지하려면 사용자가 로그아웃할 때 스토어가 초기 상태로 재설정되도록 하는 것이 필수적입니다.

이를 달성하기 위한 한 가지 접근 방식은 사용자 정의 루트 리듀서를 생성하는 것입니다. 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);
};

다음으로, USER_LOGOUT 작업이 수신되면 초기 상태를 반환하는 rootReducer입니다. 리듀서는 작업 유형에 관계없이 첫 번째 인수로 undefine을 사용하여 호출할 때 초기 상태를 반환하는 것으로 알려져 있습니다. 이 동작을 활용할 수 있습니다.

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

  return appReducer(state, action);
};

이 수정을 통해 모든 감속기는 USER_LOGOUT 시 다시 초기화되며 선택적으로 action.type에 따라 다른 상태를 반환할 수 있습니다.

애플리케이션이 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 Store 상태를 올바르게 재설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!