注销时重置应用程序状态

Question

我有一个应用程序的多个主题区域的状态为类。假设这是一个聊天应用程序，主题是用户、聊天消息和聊天室。用户通过登录 authenticated/authorized。之后的状态取决于登录的用户。当用户注销时，应用程序需要将所有 'topics' 的状态重置为他们的默认状态。

问题：

组织这些状态的最佳方式是什么？这似乎是子状态的一个很好的用法，但是子状态文档讨论了如何设置子状态但没有显示状态的含义的任何示例 'bound together'
如何重置所有状态？这是 reset API 的一个很好的用法吗？

Answer 1

经过一些额外的研究和实验，我可以回答第二个问题 - 'how do I reset all of the states?' 我认为动作类只与他们管理的状态相关 - 但事实并非如此。国家可以处理你选择的任何行动。所以：

header 组件注入商店服务。
header 的 onLogout 调度注销操作。
通过重置存储的 JWT 的身份验证状态响应
任何其他状态都可以响应注销以重置自身

Answer 2

每个功能模块都应在位于功能子目录内的一对名为 feature-name.actions.ts 和 feature-name.state.ts 的文件中定义自己的状态片段（请参阅 the official style guide ).
正如您所说，每个功能状态都可以响应其他状态中定义的动作，并相应地更新自己的状态。这是一个例子：

src/app/auth/auth.state.ts:

...
// Import our own actions, including the Logout action
import { Logout, ... } from './auth.actions';


export interface AuthStateModel {
  token?: string;
  currentUser?: User;
  permissions: string[];
}

const defaults: AuthStateModel = {
  token      : null,
  currentUser: null,
  permissions: [],
};


@State<AuthStateModel>({
  name: 'auth',
  defaults
})
export class AuthState {
  ...
  // Respond to the Logout action from our own state
  @Action(Logout)
  logout(context: StateContext<AuthStateModel>) {
    context.setState({ ...defaults });
  }
  ...
}

src/app/users/users.state.ts:

...
// Import our own actions
import { LoadAllUsers, ... } from './users.actions';

// Import the Logout action from the Auth module
import { Logout }       from '../auth/auth.actions';


export interface UsersStateModel {
  users?: User[];
}

const defaults: UsersStateModel = {
  users: null,
};


@State<UsersStateModel>({
  name: 'users',
  defaults
})
export class UsersState {
  ...
  // An example of the usual case, responding to an action defined in
  // our own feature state
  @Action(LoadAllUsers)
  loadUsers(context: StateContext<UsersStateModel>, action: LoadAllUsers) {
    ...
  }


  // Respond to the Logout action from the Auth state and reset our state (note
  // that our context is still of type StateContext<UsersStateModel>, like the other
  // actions in this file
  @Action(Logout)
  logout(context: StateContext<UsersStateModel>) {
    context.setState({ ...defaults });
  }
  ...
}

请注意，尽管 AuthState.logout() 和 UsersState.logout() 都响应 Logout 操作（在 AuthState 模块中定义），但 AuthState.logout() 函数接受类型为 StateContext<AuthStateModel>，因为我们要调用上下文的 setState() 函数来更新 'auth' 特征状态。但是，UsersState.logout() 函数接受类型为 StateContext<UsersStateModel> 的上下文，因为我们要调用 that 上下文的 setState() 函数来重置 'users' 功能状态。

每个附加功能模块都可以像 UsersState 一样响应注销操作，并重置它们自己的状态片段。

注销时重置应用程序状态

Resetting Application State on Logout

ngxs