ngrx如何订阅组件中的操作或订阅状态

Posted 2021-05-05

我通过效果将对象置于状态：

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

但后来，我添加了新的字段（通过效果，服务器响应后）和redux看起来像：

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

在组件中，我需要获得最后的状态。我怎么能这样做？订阅商店并在“newField”已经到位时获取状态。

@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);
    }),
  );

我听说过联合减速器...但我不知道如何使用它。减速器：

   @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
      }
    };

在组件我需要：

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

答案

您可以使用RxJS filter运算符：

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