Delete record using NGRX and effects

Question

I’m studying state management and while trying to delete a record by hitting my endpoint, the value of id is going "Undefined".

Component

this.store.dispatch(DELETE_COMANDA(comandaId));

Actions:

export const DELETE_COMANDA = createAction('[Comandas] Delete Comandas', props <{ payload:number }>());
export const DELETE_COMANDA_SUCESS = createAction('[Comandas] Delete comandas SUCESS', props <{ payload }>());
export const DELETE_COMANDA_FAIL = createAction('[Comandas] Delete comandas FAIL', props<Error>());

reducers

  on(comandasActions.DELETE_COMANDA_SUCESS, (state,  { payload } ) => {
    return {
      ...state,
      payload
    };
  }),

  on(comandasActions.DELETE_COMANDA_FAIL, (state, error) => ({ ...state, error})),

Effect

  deleteComanda$: Observable<any> = createEffect(() =>
  this.actions$.pipe(
    ofType(comandasActions.DELETE_COMANDA),
    map((action) => action.payload),
    mergeMap((id) =>
      this.comandaService.deleteComanda(id).pipe(
        map((payload) => comandasActions.DELETE_COMANDA_SUCESS({payload})),
        catchError((error) => of(comandasActions.DELETE_COMANDA_FAIL(error)))
        ))
    )
  );

Answer 1

The problem is that its effect is waiting for an object with the property payload and you’re sending a command call

Try it this way:

this.store.dispatch(DELETE_COMANDA({payload: comandaId}));