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.

  • 相关阅读:
    git简单介绍
    ssh常用操作
    gentoo emerge简单用法
    golang程序因未知错误崩溃时如何记录异常
    RPC实现原理(HSF、dubbo) 从头开始(一)
    websocket
    tmpfs小结
    CURL常用命令
    SVN命令详解
    3.Linux Shell流程控制
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11623695.html
Copyright © 2011-2022 走看看