标签: ngrx

我似乎陷入了困境，因为没有太多关于如何将 firestore 与 ngrx 一起使用的指南或教程。

假设我们有组织列表，所有这些都将在 2 个组件中使用，即组件 A 和组件 B。

1. 我可以制作一个效果，它采用 LOAD_ACTION 来合并可观察到的集合 valuechanges，并将其映射到每个组件的 LOAD_ACTION_SUCCESS。

现在，每次发生更改时，都会调用 LOAD_ACTION_SUCCESS，将我们的数据保存到每个存储状态。

但这需要组件首先调度 LOAD_ACTION，这对于 REAL_TIME_DATA 来说可能有点错误，因为之后它将继续更新。即使不使用时。

2. 我可以在组件本身中连接可观察值更改的服务（与 LOAD_ACTION 相同）。它不会保存状态，但 Firebase observable 有点像 Store（只要它没有保存在客户端上），所以如果它已经获取了数据，那么它就已经在那里了。

不再使用 2 个数据副本作为状态。

这让我想到：

3. 它是否应该有一个用于存储来自服务的“集合”的存储，两个组件都从中获取数据，例如在使用该状态的每个地方都没有该状态的多个副本。

任何帮助我进一步发展的信息或指导都是值得赞赏的，我似乎陷入了这样一个微不足道的问题，显然我可以继续编码，但更希望它是正确的。

当谈到 ngrx 时，处理实时数据似乎让我感到困惑。

示例也将受到赞赏。

当 URL 的查询参数发生变化时，您将如何调度 ngrx 操作？我有一个带有参数的URL（例如http://myapp.my/documents?startdate=2015-04-04&enddate=2015-06-06），当用户单击后退（前进）浏览器按钮时，Angular 将导航到上一个（下一个）URL 可能具有不同的搜索参数。所以我需要调度一个“加载文档”操作来从数据库加载相应的文档。我可以看到多种方法来做到这一点。

1. 我可以将 ngrx @Effect 绑定到 Angular-router“navigationend”Observable 并检查 URL 是否匹配“/documents”。效果将调度加载文档操作

2. 我可以将 ngrx @Effect 绑定到 ngrx/router-store 生成的 ROUTER_NAVIGATION 操作并执行操作。这里的问题是 ROUTER_NAVIGATION 不能保证用户真正到达预期的页面（例如他们可能被路由防护阻止），

3. 我可以在“文档”路径的 canActivate() 保护中分派操作 - 也许其他问题隐藏在这里（编辑：测试了这个，它不起作用，因为 canActivate 只被调用一次。当 URL 参数更改时，它不会再次被调用。 ）
4. 有更好的办法吗？

角度 5，ngrx 4。

我知道每次用户刷新页面时商店都会重置（所谓的“硬刷新”），但我希望当用户使用角度路由器遍历页面时它保持不变。但是，正如我所见，它无论如何都会重置。

我错了吗？有没有什么方法可以在不保存到 LocalStorage 或使用其他黑客的情况下保留存储？

应用程序模块.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { HttpClientModule } from '@angular/common/http';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    // Routing
    import { AppRoutingModule } from './app-routing.module';

    // Ngrx
    import { StoreModule } from '@ngrx/store';
    import {
      StoreRouterConnectingModule,
      RouterStateSerializer,
    } from '@ngrx/router-store';
    import { StoreDevtoolsModule } from '@ngrx/store-devtools';
    import { EffectsModule } from '@ngrx/effects';

    // Other
    import { reducers, metaReducers } from './core/reducers';
    import …

我在 Angular 应用程序的 app.module 中使用函数工厂来初始化一项服务。像这样的东西

export function analyticsServiceFactory() {
  return ConfigService.env === "development" ? new AnalyticsDevService() : new AnalyticsService();
}
...
const providers = [
  ...
  { provide: AnalyticsService, useFactory: analyticsServiceFactory }
];

到目前为止，这一切都运行良好。问题来了，因为现在我需要将状态（@ngrx）作为这些服务之一的依赖项注入。我该怎么做呢？

我知道我可以向工厂提供程序添加依赖项，但如何添加状态？这可能吗？

此外，我的商店和我的analyticsServiceFactory是在不同的模块中定义的，这使得它变得更加困难。

有任何想法吗？谢谢。

我已经为我的其余端点配置创建了注入令牌，并且在运行时为其提供多个值。如果令牌在 appmodule 中提供并在其工作的全局服务中使用，但是如果我尝试在功能模块中提供另一个数据并将其注入功能效果文件中，我将收到 staticinjectorerror，没有可用的提供程序。这是代码

我用来ngrx/store实现登录操作，该操作从订阅商店获取日期。登录组件是一个模式，当我输入错误的密码时，我得到data.type === 'LOGIN_FAILED'，但是，当我关闭模式并重新打开它时，数据操作仍然是LOGIN_FAILED而不是INIT。因此，登录操作不是取消订阅，我尝试手动取消订阅，但不起作用。如何正确取消订阅登录操作？

import { Component, OnInit, ViewChildren, OnDestroy } from '@angular/core';

// shared
import { ToasterService } from '../../shared/providers/toaster-service/toaster.service';

// ngx-bootstrap
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

// ngrx
import { ActionsSubject } from '@ngrx/store';

// rxjs
import { Subscription } from 'rxjs/Subscription';

  loading = <boolean>false;
  actionSub = new Subscription();
  errorMessage = <string>'';

constructor(
    private actionsSubj: ActionsSubject,
    private toastService: ToasterService,
    private bsModalRef: BsModalRef,
  ) {
    this.actionSub = this.actionsSubj.subscribe((data: any) => { …

角度 5、NGRX 5

当我的应用程序首次加载时，我的商店中有一个空列表。这是我的应用程序中多个组件使用的列表。

我想做的是从商店中选择列表：

this.terminals$ = this.store$.select(...);

如果列表为空，我想使用操作/效果填充列表：

this.store$.dispatch(new TerminalActions.GetTerminals());

是否可以在选择中执行此操作？

即调用select，如果列表为空，调用效果来填充列表？

我想在选择中执行此操作，以便我使用此列表的每个组件都可以只调用选择，而不必运行操作来填充列表。

原始帖子位于此保管箱链接

感谢@rijin 重写代码：reducers/index2.ts：

import { ActionReducerMap } from "@ngrx/store";
import { userReducer, UserState } from "./user2.reducer";
import { cartReducer, CartState } from "./cart2.reducer";

interface AppState {
  user: UserState;
  cart: CartState;
}

export const reducers2: ActionReducerMap<AppState> = {
  user: userReducer,
  cart: cartReducer
};

用户处的编译错误：userReducer：

Type '(appUserState: UserState, action: any) => User' is not assignable to type 'ActionReducer<UserState, Action>'.
Property 'user' is missing in type 'User' but required in type 'UserState'.

/reducers/user.ts：

 export class User {
  uName: string;
  isAdmin: boolean;
  ts: string; …

在下面的代码片段中，我订阅了一个投资组合并遍历一个数组。对于数组的每个成员，我创建另一个订阅来收听其报价。

this.portfolio$
  .subscribe(portfolio) => {
    portfolio.watchlist.all.forEach((a) => {      
        this.store
          .select((s) => s.quotes.quotes[a._id])          
          .subscribe((q) => {
            console.warn('subscription')
          }
      }
    })
  })

是否有任何 RxJS 运算符可以让我摆脱外部订阅？最后，我只想拥有与数组中的引号一样多的订阅。

刚刚接近使用 ngrx 并且我有一个无法解决的未处理错误，尝试搜索但什么也没有，这是错误。

错误

它告诉我必须输入 4 个参数，但是无论我在哪里搜索使用另一种替代方法的正确语法，有人知道问题是什么吗？谢谢你

这是reducer的页面，我也贴一下action的页面，有消息告诉我

import { createReducer, on, Action } from '@ngrx/store';
import * as ProvaActions from './prova.actions';
import { ProvaState } from './prova.model';


export const initialState: ProvaState = {
    user: {},
    error: false
}

const provaReducer = createReducer(
    initialState,
    on(ProvaActions.editProvaSuccess, (state, action ) => ({user: action.user , error: false })),
    on(ProvaActions.editProvaFailed, (state, action ) => ({ user: {}, error: true }))
);
  
export function reducer(state: ProvaState | undefined, action: Action) {
    return provaReducer(state, action);
  } …