Question

我的商店有一个简单的数组，如果价值不存在，我可以通过一个动作将商品添加到此数组中。

我遇到的问题是我的组件订阅在两次调度操作之前都没有收到更新的状态。

之后，它按预期工作。我的初始状态是预期的空数组，但是我不理解为什么在调度操作时不会推送状态，并返回新的状态对象。

减速器：

export function addressFormsReducer(state = initialState, action: Action): AddressFormState {
  switch (action.type) {
    case AddressFormActions.ZIP_CODE_LOOKUP_SUCCESS: {
      const zipCodeLookupResult = <IZipCodeLookupResult>action.payload;
      const index = _.findIndex(state, <IZipCodeLookupResult>{ formId: zipCodeLookupResult.formId });

      if (index >= 0) {
        state = [...state.slice(0, index), zipCodeLookupResult, ...state.slice(index + 1)];
      }
      else {
        state.push(zipCodeLookupResult);
      }

      return state;
    }

    default: {
      return state;
    }

  }
}

组件订阅：

ngOnInit(): void {
    ...

    this.sub = this.store.select<AddressFormState>('addressForms').subscribe(addressFormState => {
      let stateObj = addressFormState.filter(state => state.formId === 'ordering-provider')[0];
      if (stateObj) {
        this.zipCodeNotFound = stateObj.zipCodeNotFound;
      }
    });
  }

为什么会发生这种情况？

Answer 1

这可能是由于您通过调用state.push来改变状态。从商店中选择使用distinctUntilChanged，它使用对象相等性来检测状态是否已更改。因此，始终将状态视为不可变是很重要的。试试这个：

if (index >= 0) {
    state = [...state.slice(0, index), zipCodeLookupResult, ...state.slice(index + 1)];
}
else {
    state = [...state, zipCodeLookupResult];
}

当动作被分派两次时，状态仅被推送到组件

1 个答案: