zoukankan      html  css  js  c++  java
  • [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 }
      );
  • 相关阅读:
    win10 uwp iot
    app已损坏,打不开。你应该将它移到废纸篓
    DIVCNT2&&3
    win10 uwp iot
    win10 uwp 屏幕常亮
    win10 uwp 屏幕常亮
    win10 uwp 使用油墨输入
    win10 uwp 使用油墨输入
    win10 UWP 全屏
    win10 UWP 全屏
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11638185.html
Copyright © 2011-2022 走看看