如何使用NGRX Sytext增加和减少状态

时间:2020-09-30 07:22:08

标签: angular ngrx

我对我的角度应用程序使用NGRX状态管理。 我想使用reducer每次增加或减少1。 我的问题是,我不知道如何调度这2个动作

现在我向您展示我的代码

export enum ActionTypes {
  Increment = 'Increse num invalid search field',
  Decrement = 'Decrese num invalid search field',
}

export const increseNumInvalidSearchField = createAction(
  ActionTypes.Increment,
  props<{ numInvalid: number}>()
)
export const decreaseNumInvalidSearchField = createAction(
  ActionTypes.Decrement,
  props<{ numInvalid: number}>()
)

减速器:

const initialState: SearchState = {
  isSearchListValid: true,
  numInvalidSearchField: 0
};

export const searchReducer = createReducer<SearchState>(
  initialState,
  on(SearchActions.setSearchValidation, (state, action): SearchState => {
    return {
      ...state,
      isSearchListValid: action.isValid,
    };
  }),
  on(SearchActions.increseNumInvalidSearchField, (state, action): SearchState => {
    return {
      ...state,
      numInvalidSearchField: state.numInvalidSearchField + 1
    }
  }),
  on(SearchActions.decreaseNumInvalidSearchField, (state, action): SearchState => {
    return {
      ...state,
      numInvalidSearchField: state.numInvalidSearchField - 1
    }
  }),
);

发送动作

public setValidationStatus(regExp: string, value: any): void {
    const status = ValidationHelper.sliderInputValidation(value.toString(), regExp);
    if (!status) {
      
      this.store.dispatch(SearchActions.increseNumInvalidSearchField({numInvalid: 1})); // here is the problem
    } else {
      
      this.store.dispatch(new Decrement())
    }
  }

现在您可以看到// //这是问题所在,我不知道如何分派此操作,这样我必须在increseNumInvalidSearchField ...中提供一些值。

任何解决方案?

0 个答案:

没有答案