We have a reoslver, which everytime we want visit '/courses' route, it will be triggered, then api will be called, data will be loaded.

import { Injectable } from "@angular/core";
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "@angular/router";
import { Observable } from "rxjs";
import { Store } from "@ngrx/store";
import { AppState } from "../reducers";
import { CoursesAction } from "./actions-types";
import { tap, first, finalize } from "rxjs/operators";
import { adapter } from "./reducers/courses.reducers"; @Injectable()
export class CoursesResolver implements Resolve<any> {
loading = false;
constructor(private store: Store<AppState>) {} resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> {
return this.store.pipe(
tap(() => {
if (!this.loading) {
this.loading = true;
this.store.dispatch(CoursesAction.loadAllCourse());
}
}),
// this resolve need to complete, so we can use first()
first(),
finalize(() => (this.loading = false))
);
}
}

So how to prevent reload the data if we have already loaded the data once?

Add one prop into state: 'allCoursesLoaded'

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();

Now we can modify the resolver:

import { Injectable } from "@angular/core";
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "@angular/router";
import { Observable } from "rxjs";
import { Store, select } from "@ngrx/store";
import { AppState } from "../reducers";
import { CoursesAction } from "./actions-types";
import { tap, first, finalize, filter } from "rxjs/operators";
import { adapter } from "./reducers/courses.reducers";
import { selectAllCoursesLoaded } from "./courses.selectors"; @Injectable()
export class CoursesResolver implements Resolve<any> {
loading = false;
constructor(private store: Store<AppState>) {} resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> {
return this.store.pipe(
select(selectAllCoursesLoaded),
tap(courseLoaded => {
if (!this.loading && !courseLoaded) {
this.loading = true;
this.store.dispatch(CoursesAction.loadAllCourse());
}
}),
// this resolve need to complete, so we can use first()
filter(courseLoaded => courseLoaded),
first(),
finalize(() => (this.loading = false))
);
}
}

[NgRx] NgRx Data Fetching Solution - How to Load Data Only If Needed的更多相关文章

  1. LOAD DATA INFILE Syntax--官方

    LOAD DATA [LOW_PRIORITY | CONCURRENT] [LOCAL] INFILE 'file_name' [REPLACE | IGNORE] INTO TABLE tbl_n ...

  2. mysql迁移-----拷贝mysql目录/load data/mysqldump/into outfile

    摘要:本文简单介绍了mysql的三种备份,并解答了有一些实际备份中会遇到的问题.备份恢复有三种(除了用从库做备份之外), 直接拷贝文件,load data 和 mysqldump命令.少量数据使用my ...

  3. JDBC使用MYSQL的LOAD DATA LOACAL INFILE和LOAD DATA INFILE

    MYSQL的LOAD方法都必须建立在mysql服务允许使用该命令的情况下: 开启该命令的方法: 1.在实例对应的my.cnf(windows为my.ini)中添加一行local-infile=1(默认 ...

  4. MySQL基础之---mysqlimport工具和LOAD DATA命令导入文本文件

     1.mysqlimport工具的使用 看一下命令的使用方法: shell > mysqlimport -u root -p [--LOCAL] DBname File [option] --f ...

  5. load data infile出现“ERROR 13 (HY000): Can't get stat of '/tmp/test2.txt' (Errcode: 2)”问题

    用load data infile导数据到mysql数据库出现这个该问题,解决方法如下: 安全起见,连接mysql的语句需要添加–local-infile, mysql -hlocalhost -ur ...

  6. mysql数据库LOAD DATA INFILE Syntax

    1.LOAD DATA INFILE用来把一个文本文件里的内容高速写入到MySQL表里,它和SELECT ... INTO FILE的操作是对应的,一个导入.一个导出.使用LOAD DATA INFI ...

  7. MySQL 之 LOAD DATA INFILE 快速导入数据

    SELECT INTO OUTFILE > help select; Name: 'SELECT' Description: Syntax: SELECT [ALL | DISTINCT | D ...

  8. mysql load data 乱码

    解决方案: http://stackoverflow.com/questions/26256421/sql-load-data-infile-utf8-issue 即: load data local ...

  9. Mybatis拦截器 mysql load data local 内存流处理

    Mybatis 拦截器不做解释了,用过的基本都知道,这里用load data local主要是应对大批量数据的处理,提高性能,也支持事务回滚,且不影响其他的DML操作,当然这个操作不要涉及到当前所lo ...

随机推荐

  1. spring boot 初始

    前言 与时俱进是每一个程序员都应该有的意识,当一个Java程序员在当代步遍布的时候,你就行该想到我能多学点什么.可观的是后端的框架是稳定的,它们能够维持更久的时间在应用中,而不用担心技术的更新换代.但 ...

  2. python技巧 — pip install 错误,超时

    jieba库安装失败   pip install -i https://pypi.tuna.tsinghua.edu.cn/simple jieba wordcloud库安装失败 pip instal ...

  3. xorm-创建时间created

    package main import ( "fmt" _ "github.com/go-sql-driver/mysql" "github.com/ ...

  4. Socket简单Demo

    Socket协议网上介绍的有很多了,就不在画蛇添足了,本文主要编写一个小Demo,介绍下它具体实现 一:Socket服务器端 package com.founderit; import java.io ...

  5. shell分享

    shell脚本分享 一.介绍shell Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序, ...

  6. caurina缓动类

    一.简单的缓动 一个实例名为box的正方体,开始alpha为0.5,在两秒内移动到x:300 y:100的位置,alpha变为1.import caurina.transitions.Tweener; ...

  7. Loader ,URLLoader ,URLStream的区别

    AS3代码   (1)  Loader              Loader 类可用于加载 SWF 文件或图像(JPG.PNG 或 GIF)文件. 使用 load() 方法来启动加载. 被加载的显示 ...

  8. eclipse 无法启动,JAVA_HOME 失效

    主要是因为JDK和eclipse 版本不兼容导致的,4位jdk配64位eclipse,32位jdk配32位eclipse; Java 设置JAVA_HOME无效 其根本原因是%JAVA_HOME%在p ...

  9. docker相关--开始使用swarm模式

    Swarm简介 Swarm是Docker的一个编排工具,参考官网:https://docs.docker.com/engine/swarm/ Swarm 模式简介 要在Swarm模式下运行docker ...

  10. [高清·非影印] 深度学习入门:基于Python的理论与实现 + 源代码

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...