Ngrx 8-在多个操作生效的情况下调度多个else if条件

Ngrx 是一个用于 Angular 应用的状态管理库，它基于 Redux 架构模式。在 Ngrx 中，你可以通过 effects 来处理副作用，比如异步操作。当你需要在多个操作生效的情况下调度多个 else if 条件时，通常是在 reducer 中处理不同的 action 类型。

基础概念

Reducer: 是一个纯函数，它接收当前的状态和一个 action，然后返回一个新的状态。Reducer 应该是纯函数，这意味着给定相同的输入，它总是产生相同的输出，并且没有任何副作用。

Action: 是一个简单的 JavaScript 对象，它描述了发生了什么事情。它必须有一个 type 属性，通常还会有一个 payload 属性来传递额外的数据。

Effect: 是一个用于处理副作用的函数，比如异步操作。它监听特定的 action，并执行一些逻辑，然后分发新的 action。

类型

State: 应用的全局状态。
Action: 描述发生了什么事情的对象。
Reducer: 根据 action 更新状态的纯函数。
Effect: 处理副作用的函数。

应用场景

复杂状态管理: 当应用的状态变得复杂时，Ngrx 可以帮助管理这些状态。
异步操作: 使用 effects 来处理异步逻辑，如 API 调用。
跨组件状态共享: 当多个组件需要共享状态时，Ngrx 提供了一个集中的地方来管理这些状态。

示例代码

假设我们有三个 action 类型：ACTION_ONE, ACTION_TWO, 和 ACTION_THREE。我们想要在 reducer 中处理这些 action，并且每个 action 都有不同的逻辑。

// actions.ts
export const ACTION_ONE = 'ACTION_ONE';
export const ACTION_TWO = 'ACTION_TWO';
export const ACTION_THREE = 'ACTION_THREE';

export const actionOne = () => ({ type: ACTION_ONE });
export const actionTwo = () => ({ type: ACTION_TWO });
export const actionThree = () => ({ type: ACTION_THREE });

// reducer.ts
import { ACTION_ONE, ACTION_TWO, ACTION_THREE } from './actions';

export interface State {
  // 定义你的状态结构
}

const initialState: State = {
  // 初始化状态
};

export function reducer(state = initialState, action: any) {
  switch (action.type) {
    case ACTION_ONE:
      // 处理 ACTION_ONE 的逻辑
      return { ...state, /* 更新状态 */ };
    case ACTION_TWO:
      // 处理 ACTION_TWO 的逻辑
      return { ...state, /* 更新状态 */ };
    case ACTION_THREE:
      // 处理 ACTION_THREE 的逻辑
      return { ...state, /* 更新状态 */ };
    default:
      return state;
  }
}