标签: ngrx

我想有一个简单的代码路径来创建和分派HTTP操作.我想做的是:

this.http.request(...)
  .map((res: Response) => res.json())
  .catch((err: any) => err.json())
  .map((payload: any) => { type: 'SUCCESS', payload })
  .catch((payload: any) => { type: 'FAILURE', payload})
  .subscribe((action: Action) => this.store.dispatch(action));

这样,成功和失败响应都转换为JSON,然后根据成功/失败标准分配正确的减少类型,以便可以正确地操作商店.(认为​​用户登录成功和失败,返回200或401).

是否有更清洁或更好的处理方式？当前第二个.catch不能很好地发挥,因为它没有返回一个可观察的.

建议或其他解决方案欢迎？

我正在使用ngrx/effects.

我怎样才能发出空行动？

这就是我现在正在做的事情:

 @Effect() foo$ = this.actions$
    .ofType(Actions.FOO)
    .withLatestFrom(this.store, (action, state) => ({ action, state }))
    .map(({ action, state }) => {
      if (state.foo.isCool) {
        return { type: Actions.BAR };
      } else {
        return { type: 'NOT_EXIST' };
      }
    });

由于我必须返回一个动作,我正在使用return { type: 'NOT_EXIST' };.

有一个更好的方法吗？

在我的示例Angular 2应用程序中,我使用ngrx/store和ngrx/effects进行状态管理.

下面是组件中添加新项目的功能之一.

addAuthor() {

    this.store.dispatch(addAuthorAction(this.fg.value));
    console.log('2')        
} 

在上面的代码"this.store.dispatch(addAuthorAction(this.fg.value));"中 负责向服务器进行AJAX调用并向数据库添加新作者,这很好.

因为"this.store.dispatch(addAuthorAction(this.fg.value));" 是一个异步操作,即使在AJAX调用完成之前,也会执行console.log("2")语句.

我的问题是,需要修改什么才能在store.dispatch完成后执行console.log.

我试图弄清楚如何将许多资源状态组合成各种组件状态以及构成AppState的内容.大多数ngrx指南/示例只处理资源(例如书籍)或有限状态(例如书籍和选定的书籍),但我认为我没有遇到过比这更复杂的事情.

如果您有十几个资源,在多个需要不同资源状态的组件中有各种状态(列表,项目,搜索项,菜单项,过滤器等),您会怎么做？

我已经四处寻找,我提出了以下结构,但我不相信这是预期的:

AppState & reducer
<- combine reducers
- Component states & reducers
<- combine reducers
-- Resource states & reducers

您可以将资源缩减器(例如bookReducer,booksReducer,bookSearchTitleReducer)组合到与组件相关的缩减器(例如bookSearchReducer)中,然后将所有组件缩减器组合到一个具有一个AppState的缩减器中,并在AppModule中将它与商店提供者一起使用.

这是要走的路还是有其他(正确的)方法呢？如果这是一个很好的方法,我会在Component构造函数中使用Store或Store吗？

[编辑]

好吧,ngrx-example-app确实处理了更多的组件,我看到它只在组件级创建状态,而不是在资源级创建状态,组合状态和各自的reducers并在组件构造函数中使用完整的状态对象:'store:商店'.

我想,因为它是一个官方的例子,这将是处理状态/减少器的预期方式.

我正在尝试为我的ngrx状态管理器实现Effects.目前我正在使用Angular v5.2.1,ngrx v4.1.1和rxjs v5.5.6.我试过"老"的方法

@Effect() login$: Observable<Action> = this.actions$.ofType('LOGIN')
.mergeMap(action =>
  this.http.post('/auth', action.payload)
    // If successful, dispatch success action with result
    .map(data => ({ type: 'LOGIN_SUCCESS', payload: data }))
    // If request fails, dispatch failed action
    .catch(() => of({ type: 'LOGIN_FAILED' }))
);

但我收到了一个错误 Property 'mergeMap' does not exist on type 'Actions<Action>'.所以我用了新pipe方法.问题是当我尝试导入ofType运算符时

// ...
import { Action } from '@ngrx/store';
import { Effect, Actions, ofType } from '@ngrx/effects';

import …

我正在使用NgRx 5开发一个Angular 5项目.到目前为止,我已经实现了一个骨架应用程序和一个名为"Search"的功能模块,它以封装的方式处理自己的状态,动作和缩减器(通过使用forFeature语法).

该模块有一个根组件(search-container),它呈现整个子组件树 - 它们组成了搜索UI和功能,它具有复杂的状态模型和大量的操作和缩减器.

有强烈的要求说:

1. 功能模块应根据消费者应用程序的要求彼此隔离导入.

2. 同一个功能的多个实例应该在同一个父级内共存(例如,具有单独上下文的单独选项卡)

3. 实例不应该具有共享的内部状态,但是它们应该能够对全局状态中的相同更改做出反应.

所以我的问题是:

如何将多个<search-container></search-container>组合在一起并确保它们独立运行？例如,我想在窗口小部件的一个实例中调度搜索操作,而不是在所有窗口小部件中看到相同的搜索结果.

任何建议都非常感谢.谢谢!

在此文章有关NGRX 5 medium.com(2月13日),他们目前pipeable选择.这让我想起了rxjs中有关可管理选择器的内容,它们不仅可以通过'纯函数,兄弟'来证明,而且还可以通过函数的方式在不同的情况下声明和重用,而不必每次都使用map来调用letable功能.

所以我同意,这在rxjs中是一件好事,但为什么我们需要在ngrx中使用它 - 对于选择器.链接的文章显示以下示例:

import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';

interface AppState {
  count: number;
}

@Component({
  selector: 'my-app',
  template: `
    <button (click)="increment()">Increment</button>
    <div>Current Count: {{ count$ | async }}</div>
    <button (click)="decrement()">Decrement</button>

    <button (click)="reset()">Reset Counter</button>
  `
})
export class MyAppComponent {
  count$: Observable<number>;

  constructor(private store: Store<AppState>) {
    this.count$ = store.pipe(select('count'));
  }
}

所以我们现在打电话store.pipe(select(...)); 而不是store.select(Selector);- 收益在哪里？为什么我应该更改我的代码以使用此行为或至少开始使用可管理选择器？

在我的角度应用程序中,我收到以下错误:

ERROR TypeError:rxjs_Observable__WEBPACK_IMPORTED_MODULE_4 __.ObMapable.timer不是SwitchMapSubscriber.project(hybrid.effect.ts:20)中的函数,位于SwitchMapSubscriber.push ../ node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next( switchMap.js:34)在SwitchMapSubscriber.push ../ node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next(Subscriber.js:54)at FilterSubscriber.push ../ node_modules/rxjs/_esm5/internal /在ScannedActionsSubject.push的FilterSubscriber.push ../ node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next(Subscriber.js:54)上的运算符/ filter.js.FilterSubscriber._next(filter.js:38).位于SafeSubscriber._next(store.js:332)的SafeSubscriber.push ../ node_modules/rxjs/_esm5/internal /中的./node_modules/rxjs/_esm5/internal/Subject.js.Subject.next(Subject.js:47) Subscriber.js.SafeSubscriber .__ tryOrUnsub(Subscriber.js:195)位于苏的SafeSubscriber.push ../ node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next(Subscriber.js:133)bscriber.push ../ node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next(Subscriber.js:77)

我的代码如下所示:

import { Injectable } from '@angular/core';
import { Effect, Actions } from '@ngrx/effects';
import { of } from 'rxjs/observable/of';
import { map, catchError, switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/timer';

import * as hybridActions from '../actions/hybrid.action';
import { FleetStatusReportService } from '../../fleet-status-report.service';

@Injectable()
export class HybridEffects {
  constructor( …

假设我有一个带有表的长页面(或者对于包含表的一组容器是正确的)并且这些表中有很多数据,因此它不适合屏幕,因此它是可能的使用滚动条滚动页面.

现在我在表的每一行都有一个复选框,这样我就可以选择一些行并用它们执行一些操作.

这些复选框与状态相关联,因此当我检查其中一个时,状态会更新并重新呈现整个页面.如果我理解正确,这会导致意外的内容滚动(跳跃).

所以我的问题是:是否有任何常见的方法来避免这种意外行为？我正在考虑将用户交互分离到一个单独的状态,但感觉就像是重新发明轮子一样.还有其他想法或标准方法吗？

如果我有两个或多个 NGRX 操作执行相同的操作，但在应用程序的不同部分触发，我是否可以使用一个操作来执行此操作，同时区分 NGRX 日志中的操作字符串？我之所以这样问，是因为在编写操作并尝试遵循“操作卫生”原则时，操作应该特定于某个事件，并且可以在一年后可读，并告诉开发人员到底在应用程序中触发操作的位置，我想限制为尽可能多的 NGRX 样板。

例如：我有一个“AddTodo”操作。此操作可以在我的应用程序中的两个位置执行 - 一个在“待办事项列表”页面上，另一个在“待办事项详细信息”页面上。每个操作对于触发它们的页面来说都是唯一的，但它们执行完全相同的操作；他们向我的状态对象添加了一个新的待办事项。

const TODO_LIST = '[Todo List]';
const TODO_DETAILS = '[Todo Details]';

export const TODO_LIST_ADD = `${TODO_LIST} Add`;
export const TODO_DETAILS_ADD = `${TODO_DETAILS} Add`;

export class TodoListAdd implements Action {
    readonly type = TODO_LIST_ADD;
    constructor(public payload: Todo) { }
}

export class TodoDetailsAdd implements Action {
    readonly type = TODO_DETAILS_ADD;
    constructor(public payload: Todo) { }
}

export function todoReducer(state = initialState, action: Action): TodoState {
    switch (action.type) {
        case actions.TODO_LIST_ADD:
        case actions.TODO_DETAILS_ADD: …