Ngrx存储在用户正确退出App后如何清除或重置所有状态

Question

我有一个 Ionic 3 App ，在这里我使用ngrx store 和 effect 获得更好的状态管理库，因为我开发大型应用程序。每个数据流都可以正常运行。但是有一个小问题。

如果用户已退出 App 应用程序中某些与会话或用户信息相关的状态 已清除，但是我想发生的是每个还原器的所有状态。

我将如何实现？这是我在下面所做的事情：

在我的 actions-events.ts

中

export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
export const LOGOUT_FAILED = 'LOGOUT_FAILED';

和我的 component.ts

logout() {
    this.store.dispatch({ type: LOGOUT_REQUEST })
  }

在我的 effects.ts

中

@Effect()
    deAuthenticate$ = this.actions$.ofType(authActions.LOGOUT_REQUEST)
        .pipe(
            switchMap(() => {
                return this.authApi.signOut().pipe(
                    map((response: any) => ({ type: authActions.LOGOUT_SUCCESS, payload: response })),
                    catchError(error => of({ type: authActions.LOGOUT_FAILED, payload: error }))
                )
            })
        )

我声明了三种类型的动作，它们在第一段代码中是异步的。然后，该组件将调度LOGOUT_REQUEST动作。之后，效果将收听该操作，并在提供商上调用方法，以请求 http注销请求在服务器上。我将等待响应，并调度成功或失败操作来更新状态树。

现在一切正常，但是我注意到在商店或状态的某些部分数据存在或持久存在一个小问题。 / strong>。当其他用户尝试登录时，我不想发生这种情况。

我要发生的事情是在用户注销时清除整个状态树。我该怎么办？

有关我的结构的其他信息，请点击下面的 authReducer

import { LOGIN_REQUEST, LOGIN_FAILED, LOGIN_SUCCESS, LOGOUT_REQUEST, LOGOUT_SUCCESS, LOGOUT_FAILED } from './../actions/authenticate';
import { AuthState } from './../store';
import { Action } from '@ngrx/store';
import { PostState } from '../store';

const initialState: AuthState = {
    isAuthenticated: false,
    authenticating: false,
    unauthenticating: false,
    token: null,
    error: null
}

export function authReducer(state = initialState, action: Action) {
    switch (action.type) {
        case LOGIN_REQUEST: // Sign in request
            return {
                ...state,
                authenticating: true,
            }
        case LOGIN_SUCCESS: // Sign in success
            return {
                ...state,
                authenticating: false,
                isAuthenticated: true,
                token: (<any>action).payload.data.token
            }
        case LOGIN_FAILED: // Sign in failed
            return {
                ...state,
                authenticating: false,
                error: (<any>action).payload
            }
        case LOGOUT_REQUEST: // Sign out request
            return {
                ...state,
                unauthenticating: true
            }
        case LOGOUT_SUCCESS: // Signout success
            return {
                ...state,
                unauthenticating: false,
                isAuthenticated: false,
                token: null
            }
        case LOGOUT_FAILED: // Signout failed
            return {
                ...state,
                unauthenticating: false,
                error: (<any>action).payload
            }
        default:
            return state;
    }
}

和我的 rootReducer

import { postsReducer } from "../reducers/posts";
import { usersReducer } from "./users";
import { authReducer } from "./authenticate";

export const rootReducer = {
    posts: postsReducer,
    users: usersReducer,
    auth: authReducer,
}

在我的 app.module.ts 中，我使用了记录器来记录状态树。

export function logger(reducer: ActionReducer<any>): any {
  // default, no options
  return storeLogger()(reducer);
}

export const metaReducers = [logger];

和进口

StoreModule.forRoot(rootReducer, { metaReducers }),
    EffectsModule.forRoot(effects),
    StoreDevtoolsModule.instrument({
      maxAge: 15
    }),

感谢有人可以帮助您。 预先感谢。

Answer 1

您可以引入一个复位动作，该动作在您的减速器中进行处理，如下所示：

case 'RESET'
  return initial state;

如果您需要在多个reducer中使用此行为，我建议使用meta-reducer，如下所示：