How to intercept when the action start and store is updated?

Question

I am using NGRX. I have many actions and I want to know when actions start and when the store is updated.

The idea is to have a centralized way to get the information no matter what action is executed. I need to know when the store updates without subscribing to all selectors.

updateTitle ----> title is updated.

best, Hmendez

Hamza Zaidi · Answer 1 · 2020-08-14T19:31:22.203

You have to explicitly define actions

e.g.

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 }>())

in reducer you can catch actions and update the state

e.g

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
   }
  })
)

If title is getting updated with async call you have to add an Effect

Effect, Checkout the documentation.

Selectors, Use selectors to read state and bind it to UI.

How to intercept when the action start and store is updated?

1 Answers1