标签: angular-ngrx-data

我尝试使用覆盖 EntityData getAll() 函数的服务设置 NgRx Data，以便我可以调用 API。但是当我调用 EntityService.getAll() 时没有任何反应

entity-metadata.ts ：EntityMetadataMap 的标准定义，其中我定义了一个名为 PageLoadData 的实体

import { EntityMetadataMap } from '@ngrx/data';

export const entityMetadata : EntityMetadataMap = {
    PageLoadData: {
        entityDispatcherOptions: {
            optimisticUpdate: true
        }
    }
} 

我的 AppModule.ts

import { AppResolver } from './app.resolver';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EntityDataModule, EntityDataService } from '@ngrx/data';
import { StoreModule } from …

我有一个状态，我想从 ngrx/data 实体创建选择器。

import {
  Action,
  ActionReducer,
  ActionReducerMap,
  createFeatureSelector,
  createSelector,
  MetaReducer
} from '@ngrx/store';
import {environment} from '../../environments/environment';
import * as fromRouter from '@ngrx/router-store';
import * as fromDrawer from './drawer';
import {InjectionToken} from '@angular/core';
import {NavigationItem} from '../models/navigation-item';

export interface State {
  router: fromRouter.RouterReducerState<any>;
  drawerNavigationItems: fromDrawer.State;
}

export const ROOT_REDUCERS = new InjectionToken<ActionReducerMap<State, Action>>('Root reducers token', {factory: () => ({
    router: fromRouter.routerReducer,
    drawerNavigationItems: fromDrawer.reducer,
  }),
});

export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

export const selectRouter = …

尝试了解此处的ngrx/data 实体数据服务示例，其中显示“创建实体数据服务”。在展示该服务之后，文档继续展示如何在组件中使用 ngrx/data。我感兴趣的组件部分是这样的：

getHeroes() {
  this.heroService.getAll();
}

文档声明getAll()发起一个 HTTP 请求，但我不确定这个请求实际上是在哪里或如何发出的。在ngrx-data 存储库中。它指出用以下代码替换 HeroService：

import { Injectable } from '@angular/core';
import {
  EntityCollectionServiceBase,
  EntityCollectionServiceElementsFactory
} from 'ngrx-data';
import { Hero } from '../core';

@Injectable({ providedIn: 'root' })
export class HeroService extends EntityCollectionServiceBase<Hero> {
  constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
    super('Hero', serviceElementsFactory);
  }
}

文档指出ngrx-data handles getting and saving our data for us。太好了，但我不知道获取数据是在哪里发生的。我克隆了存储库，检查了finish分支，但找不到到达端点的东西。

http.get(${api}/heroes)例如，曾经调用获取所有英雄的服务getAll()，但是被上面的代码替换了，那么这些调用发生在哪里呢？

我注意到EntityCollectionServiceBase有一个getAll()方法。但是该服务的配置在哪里进行以注册相应的端点呢？我确信我在这里遗漏了一些非常简单的东西。

我目前正在尝试将我的 ngrx 存储转换为使用 ngrx/data 来处理我的实体。我遇到的更棘手的障碍之一是处理返回多个实体数据的 API 端点。一个简单的例子 - 假设我有以下模型可以从我的 API 中检索：

export interface Parent {
  id: string;
  name: string;
}

export interface Child {
  id: string;
  name: string;
  parent: string
}

我有以下端点：

/api/parents              #GET (list of parents), POST (create new parent)
/api/parents/<PARENT_ID>  #GET, PATCH, PUSH, DELETE (a single parent)
/api/children             #GET (list of children), POST (create new child)
/api/children/<CHILD_ID>  #GET, PATCH, PUSH, DELETE (a single child)
/api/families             #GET (all parents and children)

/api/families 是一个方便的函数，它以以下格式返回所有父级和子级：

/api/parents              #GET (list of parents), POST …

我正在构建一个应用程序，其中包含带有电影列表的不同页面。例如搜索页面（按搜索的电影）、演员的页面（按演员的电影）、类型的页面（按类型的电影）。问题是它们都共享相同的基本功能 - 根据某些标准加载电影列表。我有一个减速器，用于在加载某些内容后存储电影实体。但问题是我必须为每个页面类型创建一个单独的减速器来保存相关的电影 ID 以显示。

最初，我只是从头开始实现所有这些页面，同时复制大量代码 - 每个页面的单独操作、效果、reducers。现在我觉得它很丑陋，可以以更简洁的方式完成。

我的服务中已经有一个通用的queryMovies函数，它通过 options 参数查询电影。

你能提出任何组织这些代码的好方法吗？

编辑：

由于此帖已被删除，我无法发表评论或回复（只能编辑）。所以我添加这个链接作为编辑的一部分：https : //github.com/johnpapa/angular-ngrx-data

我认为这是一个很好的问题，并希望看到更多关于 ngRx 的适当架构/模式的讨论。

我是新手@ngrx/data，正在查看文档。

使用该指南，我已经能够复制以前手动完成的操作 - 例如，使用此概述页面上的服务，以下工作调用 REST-API 并将供应商添加到商店。

组件.ts

  onSave(supplier: Supplier) {
    this.supplierService.add(supplier);
  }

我知道为了达到效果，我可以执行以下操作：

  hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType('[Supplier] @ngrx/data/save/add-one/success'),
        tap(console.log)
      ),
    { dispatch: false }
  );

但是 - 是否有一种类型安全的方法来挂钩成功的 API 调用操作/实体操作？

更新-澄清

我正在使用@ngrx/data，所以我不会直接自己创建操作以及类型的导出。

成功添加供应商后 - 在 http 调用后会产生以下类型的操作：'[Supplier] @ngrx/data/save/add-one/success'- 我想要执行效果。除了使用字符串'[Supplier] @ngrx/data/save/add-one/success'（如上所示）之外，还有类型安全的钩子吗？

以前（当我自己创建操作时）我会导出联合类型并执行ofType(supplierActions.addSupplier)

更新 - 更接近答案

找到了ofEntityType，ofEntityOp这让我更接近我的目标，因为这些工作如下ofType：

  hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofEntityType('Supplier'),
        ofEntityOp(EntityOp.SAVE_ADD_ONE_SUCCESS),
        tap(console.log) …

我目前正在使用 NgRx Data 对我的项目中的几个实体执行 CRUD 操作。现在，我必须开发分页。因此，REST API 响应将类似于：

{
    "page": 1,
    "per_page": 10,
    "total": 100,
    "total_page": 10,
    "data": [
        { ... },
        { ... },
        { ... }
    ]
}

AFAIK，NgRx 数据适用于实体，我不知道如何处理这个问题。你能把我重定向到一些光吗？谢谢你。

使用@ngrx/data我想以getWithQuery不同于默认值的方式处理API 调用的结果。

目前，如果这返回一个实体数组，则entityCache直接加载到.

到目前为止，我已经使用了概述中显示的标准模式：

export const entityMetadata: EntityMetadataMap = {
  PurchaseOrder: {}
};

@Injectable({
  providedIn: "root"
})
export class PurchaseOrderService extends EntityCollectionServiceBase<
  PurchaseOrder
> {
  constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
    super("PurchaseOrder", serviceElementsFactory);
  }
}

相反，我想处理以下 API 响应并entities像往常一样将加载到entityCache 中，getWithQuery但也将其粘贴total在我商店的其他地方。

{
    "entities": [{...}, {...}, ..., {...}],    // list of entities
    "total": 100
}

如果返回此 API 响应，我自然会收到以下错误：

我的理解是，为每个提供EntityCollectionDataService接口和add / delete / getAll / getById / …

I am new to angular. Here I using ngrx to manage a state in my angular app. But when I'm compiling I got the following error. It says that 'Types of parameters 'action' and 'action' are incompatible'. I want to know the reason for this and how to solve this?

 
    Error: src/app/shopping-list/store/shoppingList.actions.ts:9:5 - error TS2564: Property 'payload' has no initializer and is not definitely assigned in the constructor.
    
    9     payload: Ingredient;
          ~~~~~~~
    src/app/app.module.ts:25:27 - error TS2322: Type '(state: { ingredients: …

我使用以下命令安装 ngrx/store：

ng add @ngrx/store 

然后我想添加商店

ng generate store auth/Auth --module auth.module.ts

得到以下错误：

发生未处理的异常：在集合“@schematics/angular”中找不到原理图“商店”。有关更多详细信息，请参阅“xxx\angular-errors.log”。