[javascript] Redux 스토어의 상태를 재설정하는 방법은 무엇입니까?

그렇게하는 한 가지 방법은 응용 프로그램에서 루트 감속기를 작성하는 것입니다.

루트 리듀서는 일반적으로 작업 처리를로 생성 된 리듀서에 위임합니다 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후 초기 상태로 돌아가 도록 새로운 것을 가르쳐야합니다 USER_LOGOUT. 아시다시피 감속기는 undefined동작에 관계없이 첫 번째 인수로 호출 될 때 초기 상태를 반환해야합니다 . 하자 조건부 축적을 제거하기 위해이 사실을 사용하는 state우리가 그것을 통과 appReducer:

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

  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') {
    state = undefined
  }

  return appReducer(state, action)
}

여기서 상태를 변경하지 않고 다른 함수에 전달하기 전에 호출 된 로컬 변수 의 참조 를 다시 할당하는 것 입니다 state. 상태 객체를 변경하면 Redux 원칙을 위반하게됩니다.

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')

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

답변

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

const RESET_ACTION = {
  type: "RESET"
}

const INITIAL_STATE = {
  loggedIn: true
}

const randomReducer = (state=INITIAL_STATE, action) {
  switch(action.type) {
    case 'SOME_ACTION_TYPE':

       //do something with it

    case "RESET":

      return INITIAL_STATE; //Always return the initial state

   default:
      return state;
  }
}

const logoutHandler = () => {
    store.dispatch(RESET_ACTION)
    // Also the custom logic like for the rest of the logout handler
}

const rootReducer = combineReducers({
    auth: authReducer,
    ...formReducers,
    routing
});


export default (state, action) =>
  rootReducer(action.type === 'USER_LOGOUT' ? undefined : state, action);

 const reducer = (state = initialState, { type, payload }) => {

   switch (type) {
      case RESET_STORE: {
        state = initialState
      }
        break
   }

   return state
 }

const appReducer = combineReducers({
  tabs,
  user
})

const initialState = appReducer({}, {})

const rootReducer = (state, action) => {
  if (action.type === 'LOG_OUT') {
    state = initialState
  }

  return appReducer(state, action)
}

//index.reducer.ts
export const reducers: ActionReducerMap<State> = {
    auth: fromAuth.reducer,
    layout: fromLayout.reducer,
    users: fromUsers.reducer,
    networks: fromNetworks.reducer,
    routingDisplay: fromRoutingDisplay.reducer,
    routing: fromRouting.reducer,
    routes: fromRoutes.reducer,
    routesFilter: fromRoutesFilter.reducer,
    params: fromParams.reducer
}

//app.module.ts
import { IndexReducer } from './index.reducer';
import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
...
export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
    return function(state, action) {

      switch (action.type) {
          case fromAuth.LOGOUT:
            console.log("logout action");
            state = undefined;
      }

      return reducer(state, action);
    }
  }

  export const metaReducers: MetaReducer<any>[] = [debug];

  @NgModule({
    imports: [
        ...
        StoreModule.forRoot(reducers, { metaReducers}),
        ...
    ]
})

export class AppModule { }