ngrx How to subscribe to action in component or subscribe to state

Question

i put object to state by action via effect:

{
 field1: 'value1',
 field2: 'value2',
}

but then, i adding new field (via effects, after server's response) and redux looks like:

{
 field1: 'value1',
 field2: 'value2',
 newField: 'this is new field'
}

In component i need to get just final, last state. How i can do it ??? Subscribe to store and get state just when "newField" already in place.

@Effect()
  initializeMain$: Observable<Action> = this.actions$.pipe(
    ofAction(AppInitializeAction),
    map(action => {
      const obj = {
		 field1: 'value1',
		 field2: 'value2',
	  }
      return new InitializeObjAction(obj);
    }),
  );

  @Effect()
  addNewFieldToState$: Observable<Action> = this.actions$.pipe(
    ofAction(InitializeObjAction),
    map(action => {
      const newField = {
		 newField: 'This is new field'
	  }
      return new addNewFieldAction(newField);
    }),
  );

I've heard about combine reducers...but i do not know how to use it. Reducers:

   @Action(InitializeObjAction)
	initialize(state: IAppState, action: InitializeObjAction) {
    return { ...state, mainState: action.payload };
   }
   @Action(addNewFieldAction)
	addNewField(state: IAppState, action: addNewFieldAction) {
    return {
      ...state,
      mainState: {
        ...state.mainState,
        newField: action.payload
      }
    };

In component i need:

this.store.select(storeStateWithNewField).subscribe.....

you can add a selector in the reducer for the same and get it from the store rather than getting the whole store and filter — Rahul Singh

ibenjelloun ibenjelloun · Accepted Answer · 2018-10-03T08:29:01

You can use the RxJS filter operator :

this.store.select(storeStateWithNewField)
.pipe(filter(_ => _.newField !== undefined))
.subscribe...;

ngrx How to subscribe to action in component or subscribe to state

1 Answers