アクションが2回ディスパッチされたときにのみ、状態がコンポーネントにプッシュされます

Question

値がまだ存在しない場合、この配列にアイテムを追加するための単純な配列と1つのアクションがあります。

問題は、コンポーネントのサブスクリプションが、アクションが2回ディスパッチされるまで、更新された状態を受け取らないということです。

その後、期待どおりに動作します。私の初期状態は、期待どおり空の配列ですが、私は、アクションがディスパッチされたときに状態がプッシュされない理由を理解していない、新しい状態オブジェクトが返されます。

減速：

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が使用されます。オブジェクトの等価性を使用して、状態が変更されたかどうかが検出されます。このため、常に状態を不変として扱うことが重要です。これを代わりに試してください：