如何在动作开始和存储更新时进行拦截？

问题描述

我正在使用NGRX。我有很多动作，我想知道什么时候开始动作以及何时更新商店。

这个想法是要有一种集中的方式来获取信息，而不管执行什么动作。我需要知道商店何时更新而无需订阅所有选择器。

updateTitle ---->标题已更新。

最好， 曼德斯

解决方法

您必须明确定义动作

例如

import { createAction,props } from "@ngrx/store";    

export enum HeaderActionTypes {
  UpdateTitle = '[Title] Update Title',UpdateTitleSuccess = '[Title] Update Title success'
}

export const UpdateTitle = createAction(HeaderActionTypes.UpdateTitle)
export const UpdateTitleSuccess = createAction(HeaderActionTypes.UpdateTitleSuccess,props<{ payload: string }>())

在reducer中，您可以捕获动作并更新状态

例如

import { createReducer,on } from "@ngrx/store";

export const initialState = {
   ... // Additional state properties can go here. 
   updatingTitle: false,title: ''
}


export const reducer = createReducer(
  initialState,on(HeaderActionTypes.UpdateTitle,(state) => {
    return {
      ...state,updatingTitle: true
   }
  }),on(HeaderActionTypes.UpdateTitleSuccess,(state,{ payload }) => {
    return {
      ...state,updatingTitle: false,title: payload
   }
  })
)

如果title正在通过async通话进行更新，则您必须添加一个Effect

Effect，请查阅文档。

Selectors，使用选择器读取状态并将其绑定到UI。