[NgRx] Optimistically Editing Entity Data

First thing first, let's define a action to update entity:

import { createAction, props } from "@ngrx/store";
import { Update } from "@ngrx/entity";
import { Course } from "./model/course";

export const courseUpdated = createAction(
  "[Edit Course Dialog] Course Updated",
  props<{ update: Update<Course> }>()
);

The 'Update' interface has props: 'id, changes'.

 

Component usage:

  onSave() {
    const course: Course = {
      ...this.course,
      ...this.form.value
    };

    const update: Update<Course> = {
      id: course.id,
      changes: course
    };

    this.store.dispatch(courseUpdated({ update }));

    this.dialogRef.close();
  }

 

Reducer:

export const coursesReducer = createReducer(
  initCoursesState,

  on(CoursesAction.courseUpdated, (state, action) =>
    adapter.updateOne(action.update, state)
  )
);

 

Effect:

  saveCourse$ = createEffect(
    () =>
      this.action$.pipe(
        ofType(CoursesAction.courseUpdated),
        concatMap(action =>
          this.coursesHttpService.saveCourse(
            action.update.id,
            action.update.changes
          )
        )
      ),
    { dispatch: false }
  );