updateOne of ngrx entity is not changing the state

Question

i have my actions setup like this

    export const bankAccountUpdating = createAction(
  '[Create New Account Component] Account Updating',
  props<{ update: Update<BankAccount> }>()
);

export const bankAccountUpdated = createAction(
  '[Bank Manager Effect] Account Updated',
  props<{ update: Update<BankAccount> }>()
);

export const updateAccountError = createAction(
  '[Bank Manager Effect] Update Accounts Error'
);

and the reducers are setup like this

 export const initialBankAccountsState = adapter.getInitialState({
  allBankAccountsLoaded: false,
});

export const bankManagerReducer = createReducer(
  initialBankAccountsState,

  on(BankManagerActions.bankAccountUpdated, (state, action) =>
    adapter.updateOne(action.update, state)
  ),

i have an effect that triggers on "Updating" and once server's response is returned i am dispatching "updated"

 updateAccount$ = createEffect(() =>
  this.actions$.pipe(
    ofType(BankManagerActions.bankAccountUpdating),
    concatMap((action) =>
      this.bankManagerHttpService
        .updateAccount(action.update.id, action.update.changes)
        .pipe(
          map(account => BankManagerActions.bankAccountUpdated(
            {update: {id: account.id, changes: account}})), // action here
          catchError((err) => {
            console.log(err);

            return of(BankManagerActions.updateAccountError());
          })
        )
    ),
));

notice that on "Updated" i am doing "adapter.updateOne" but store doesn't shows any difference. notice that on "updating" i have no reducer logic because i am not changing state. "updating" is only causing an effect to make back end call. when i come back form back end then i call "updated" which calls "updateOne" but its not changing the state.

when i load the page that has the grid and all the accounts are loaded i see difference appears. that one of the object in array was updated. it should show difference as soon as i am calling "updateOne"

Update

service code looks like this

    updateAccount(id: string | number, account: Partial<BankAccount>): Observable<BankAccount> {
    const headers = new HttpHeaders();
    headers.append('Content-Type' , 'application/json');
    return this.http.put<BankAccount>('https://localhost:44391/BankAccount/' + id, account);
  }

Are you sure that `this.bankManagerHttpService.updateAccount` return an `Observable`? If it's not the case, try: `BankManagerActions.bankAccountUpdated({update: action.update})`. What is the content of `bankAccountUpdated` action? — HTN, Jun 07 '20 at 09:13
yes this was the issue, it works now. you can add this as an answer — Raas Masood, Jun 07 '20 at 09:47

score 0 · Accepted Answer · answered Jun 07 '20 at 10:08

0

If bankManagerHttpService.updateAccount does not return an Observable<Account>, try: BankManagerActions.bankAccountUpdated({update: action.update}).

answered Jun 07 '20 at 10:08

HTN

3,388
1
8
18

In added the code u can see it does return the observable but still what u said worked – Raas Masood Jun 07 '20 at 11:21
You can make the http return whatever type you want in the frontend with `this.http.put(...)`, however it does not mean the backend returns this type in the runtime. In your place, I would check if the backend really returns an Account (e.g: with Chrome Devtool ==> network) ..., if it is not the case, it will update the signature of the method. – HTN Jun 07 '20 at 11:31

updateOne of ngrx entity is not changing the state

1 Answers1