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);
}
If bankManagerHttpService.updateAccount
does not return an Observable<Account>
, try: BankManagerActions.bankAccountUpdated({update: action.update})
.