ngRx ------reducer

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

介绍

reducer 负责一个状态向另一个状态的转换. Reducer 方法通过决定去处理哪个action来实现这种转变

reducer 函数作用

reducer 管理state的有些共通点：

• 一个定义state 类型的接口
• state的初始值
• reducder 参数：初始值或当前state和当前action
• switch语句

例子：

首先，定义一个action,用来和state相互作用 scoreboard-page.actions.ts

import { Action } from '@ngrx/store';

export enum ActionTypes {
  IncrementHome = '[Scoreboard Page] Home Score',
  IncrementAway = '[Scoreboard Page] Away Score',
  Reset = '[Scoreboard Page] Score Reset',
}

export class IncrementHome implements Action {
  readonly type = ActionTypes.IncrementHome;
}

export class IncrementAway implements Action {
  readonly type = ActionTypes.IncrementAway;
}

export class Reset implements Action {
  readonly type = ActionTypes.Reset;

  constructor(public payload: { home: number; away: number }) {}
}

export type ActionsUnion = IncrementHome | IncrementAway | Reset;

其次，创建 scoreboard.reducer.ts

1， 定义state 类型和组成

import * as Scoreboard from '../actions/scoreboard-page.actions';

export interface State {
  home: number;
  away: number;
}

2, 设置state 初始值

export const initialState: State = {
    home: 0,
    away: 0,
};

3， 创建 reducer 方法，

export function reducer(
  state = initialState,
  action: Scoreboard.ActionsUnion
): State {
  switch (action.type) {
    case Scoreboard.ActionTypes.IncrementHome: {
      return {
        ...state,
        home: state.home + 1,
      };
    }

    case Scoreboard.ActionTypes.IncrementAway: {
      return {
        ...state,
        away: state.away + 1,
      };
    }

    case Scoreboard.ActionTypes.Reset: {
      return action.payload; // typed to { home: number, away: number }
    }

    default: {
      return state;
    }
  }
}