zoukankan      html  css  js  c++  java
  • [NgRx] NgRx Entity Adapter Configuration

    import { Course, compareCourses } from "../model/course";
    import { EntityState, createEntityAdapter } from "@ngrx/entity";
    import { createReducer, on } from "@ngrx/store";
    import { CoursesAction } from "../actions-types";
    /*
    export interface CoursesState {
      entities: { [key: number]: Course };
      ids: number[];
    }*/
    
    export interface CoursesState extends EntityState<Course> {
      /**Extend the entity here */
      allCoursesLoaded: boolean;
    }
    
    export const adapter = createEntityAdapter<Course>({
      sortComparer: compareCourses
      // selectId: course => course.id // NgRx use 'id' by default
    });
    
    export const initCoursesState = adapter.getInitialState({
      allCoursesLoaded: false
    });
    
    export const coursesReducer = createReducer(
      initCoursesState,
      on(CoursesAction.allCoursesLoaded, (state, action) =>
        adapter.addAll(action.courses, { ...state, allCoursesLoaded: true })
      )
    );
    
    export const { selectAll } = adapter.getSelectors();
    export function compareCourses(c1:Course, c2: Course) {
    
      const compare = c1.seqNo - c2.seqNo;
    
      if (compare > 0) {
        return 1;
      }
      else if ( compare < 0) {
        return -1;
      }
      else return 0;
    
    }

    'sortCompoarer' is used with adapter when you want to sort the entites based on one prop, 'ids' will be also sorted accordingly to the new entities.

  • 相关阅读:
    Oracle rownum用法、分页
    Oracle 序列(查询序列的值,修改序列的值)
    Photoshop 更换证件照底色
    Oracle 新建用户、赋予权限
    Oracle-SQL 建表
    SQL decode 函数的用法
    英语词汇800常用20类
    c语言常用排序
    js时间戳总结
    Javascript之编译器
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11623695.html
Copyright © 2011-2022 走看看