标签: ngrx

我正在使用@ ngrx/store和@ ngrx/effects制作一个Angular 2应用程序.

我正在努力理解将动作/效果等逻辑放在哪里以及调用服务功能的位置.

例如,通过身份验证......

1. 当用户单击login时AUTH_REQUEST,将使用登录凭据作为有效内容调度操作.
2. 效果会查找此操作并调用API.
3. 成功的结果AUTH_SUCCESS使用响应对象中的标记,用户名等调用该操作作为有效负载,该负载将转到reducer以更新AuthState.

例如:In AuthEffects

@Effect() authenticate$ = this.updates$
.whenAction(AuthActions.AUTHENTICATE_REQUEST)
.switchMap(update => this.api.post('/authenticate', update.action.payload)
  .map((res:any) => ({type: AuthActions.AUTHENTICATE_SUCCESS, payload: res.json()}))
  .catch((err:any) => Observable.of({ type: AuthActions.AUTHENTICATE_ERROR, payload: err }))
);

在 AuthReducer

 case AuthActions.AUTHENTICATE_SUCCESS:
  return Object.assign({}, state, <AuthState>{
    processing: false,
    failed: false,
    isLoggedIn: true,
    token: action.payload.token,
    username: action.payload.username,
    accountId: action.payload.accountId,
  });

我想知道的是:

1. 在AUTH_SUCCESS处理操作后,在何处调用路由器来更改页面.我是从效果反应链中做到这一点还是......？
2. 我有一个AuthService需要在LocalStorage中存储凭据(令牌等).我应该在哪里称之为"存储令牌"即authService.store(userCredentials).

任何帮助赞赏.

参考Angular官方网站的文件结构样式:

https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-06

如果我想将Redux(或ngrx/store)实现到我的新Angular 4项目中,以这种方式构建我的应用程序会更好吗？

    project root

    ??? src/
    ?   ??? app/
    ?   ?  ???stores/
    ?   ?  ?  ??? heros/
    ?   ?  ?  ?  ??? heros.actions.ts|reducer|effects|store.ts
    ?   ?  ?  ? 
    ?   ?  ?  ??? ..../
    ?   ?  ?  ?  ??? .....
    ?   ?  ?  
    ?   ?  ??? containers/
    ?   ?  ?  ??? heros/
    ?   ?  ?  ?  ??? heros.component.ts|html|css|spec.ts
    ?   ?  ?  ?  ?  ??? ......
    ?   ?  ?  
    ?   ?  ?
    ?   ?  ??? components/
    ?   ?  ?  ??? hero-list/ …

我刚刚开始为我的应用程序编写e2e测试,并且遇到了Protractor和ngrx/effects的超时问题.

我每隔几分钟调度一次动作有以下效果:

@Effect() setSessionTimer$ = this.actions$
        .ofType(Auth.ActionTypes.SET_SECONDS_LEFT)
        .map(toPayload)
        .switchMap(secondsLeft => Observable.concat(
            Observable.timer((secondsLeft - 60) * 1000).map(_ => new Auth.SessionExpiringAction(60)),
            Observable.timer(60 * 1000).map(_ => new Auth.SessionExpiredAction())
        ));

尝试运行Protractor测试会导致测试超时并出现以下错误,因为Angular不稳定.

失败:超时等待异步Angular任务在11秒后完成.这可能是因为当前页面不是Angular应用程序.有关更多详细信息,请参阅常见问题解答:https: //github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular 在等待带定位符的元素时 - 定位器:By(css选择器,.工具栏标题)

根据这个问题(https://github.com/angular/protractor/issues/3349)我需要使用NgZone在Angular之外运行一个Observable区间.我尝试了不同的组合this.ngZone.runOutsideAngular()但没有工作,测试继续超时.

例如,这不起作用:

@Effect() setSessionTimer$ = this.actions$
        .ofType(Auth.ActionTypes.SET_SECONDS_LEFT)
        .map(toPayload)
        .switchMap(secondsLeft => this.ngZone.runOutsideAngular(() => Observable.concat(
            Observable.timer((secondsLeft - 60) * 1000).map(_ => new Auth.SessionExpiringAction(60)),
            Observable.timer(60 * 1000).map(_ => new Auth.SessionExpiredAction())
        )));

我不知道如何在Angular之外运行效果.有没有人成功测试过他们的ngrx应用程序？

我有一个与api通信的anuglar2项目.最近,我决定集成ngrx/store来维护组件的状态,并遵循dump-smart组件架构.但是在继续前进的过程中,我读到了可以用于api请求的ngrx/effect.

在这里我的问题来了,为什么我应该使用ngrx/effect库,而不是从我的容器组件调用我的服务中的相应函数来执行api请求和成功调度操作以将返回的值保存在我的商店中.

我正在使用ngrx库并且有这样的效果

@Effect()
  loadCollection$: Observable<Action> = this.actions$
    .ofType(authAction.GET_USER)
    .startWith(new authAction.GetUserAction()) // call on app load
    .switchMap(() =>
      this.service.getUser()
        .mergeMap((user: User) => [
          new authAction.GetUserCompleteAction(user),
          new navigationAction.GetLinksCompleteAction(user.role)
        ])
    );

我正在为它编写规范,它看起来像这样

 actions = new ReplaySubject(2);
        actions.next(new auth.GetUserAction());

        effects.loadCollection$.subscribe(result => {
            expect(service.getUser).toHaveBeenCalled();
            expect(result).toEqual(new navigation.GetLinksCompleteAction('test'));  --> this line fails
        });

我怎么能期望在合并映射中调用多个动作.

我目前正在开发一个简单的测试应用程序,以了解有关@ ngrx/store的更多信息.我有一个名为TrainingModule的模块,它应该存储一些练习和更多信息.代码有效,但我试着在这里改进.我目前拥有的是我的功能模块,如下所示:

@NgModule({
  imports: [
    CommonModule,
    TrainingRoutingModule,
    StoreModule.forFeature('exercises', exerciseReducer)
  ],
  declarations: [
    TrainingDashboardComponent,
    TrainingCoreComponent,
    TrainingNavComponent,
    TrainingPlanComponent,
    ExerciseOverviewComponent,
    ExerciseListComponent]
})
export class TrainingModule {
}

和我的减速机看起来像那样:

export interface ExerciseState {
  exercises: IExercise[];
}

export interface State extends fromRoot.State {
  'exercises': ExerciseState;
}

export const initialState: ExerciseState = {
  exercises: [
    {id: 1, name: 'Exc 1'},
    {id: 2, name: 'Exc 2'}
  ]
};

export function exerciseReducer(state: ExerciseState = initialState, action: any): ExerciseState {
  switch (action.type) {
    default:
      return state;
  }
}

export …

我是新手ngrx,我遇到了这个小问题,我还没弄明白如何解决.

基本上我有一个从商店ListComponent渲染一个ListItemComponents 数组ngrx.

@Component({ 
  ...
  template: `
    <list-item *ngFor="let item of item$ | async" [data]="item">
    </list-item>
  `
})
export class ListComponent implements OnInit {
  item$: Observable<ListItem>;
  constructor(private store: Store<ListState>) {}

  ngOnInit() {
    this.item$ = this.store.select(selectListItems);
  }
}

现在,在内部ListItemComponent,在某些特定情况下,我想渲染另一个ListComponent我可以添加项目的地方,但是这不起作用,因为我收到Maximum call stack size exceeded错误.

我的猜测是,如果我错了,请纠正我,因为嵌套ListComponent是访问与根相同的状态切片ListComponent,它只是试图嵌套并一遍又一遍地渲染相同的列表到无穷大.

所以这就是问题,我应该如何组合我的选择器,以便在状态树中为每个嵌套提供正确的入口点ListComponent？

编辑

这是一个有效的stackblitz项目,现在我的应用程序中渲染List内部的逻辑ListItem是不同的,但问题是相同的.

这不是一个错误，而是一个有关如何解决我的问题的问题！

借助Angular的新PWA功能，通过服务工作者使您的应用脱机工作非常简单。我的问题是如何利用NGRX来缓存状态，以便它可以脱机使用。

我还担心，客户端在浏览器中缓存状态时可能会修改状态。（例如，使用时ngrx-store-localstorage）

我使用将我的应用程序从Angular 7升级到Angular 8 ng update。当我通过运行它时ng serve，控制台上印有一个警告ngrx：

@ngrx/store: runtime checks are currently opt-in but will be the default in the next major version with the possibility to opt-out, see https://ngrx.io/guide/migration/v8 for more information.

提供的链接上的文档讨论了ngrx-store-freeze不推荐使用的内容。但是，我的应用程序未使用ngrx-store-freeze，我也不知道什么是“运行时检查”。我需要在代码中进行哪些更改以解决此警告的来源？

从 angular 8 升级到 angular 11（ngrx 从 6 更新到 10）后出现此错误。如果我注释掉一个文件，我将收到另一个文件的错误。

即使我保留一个空白的效果文件或服务文件，它也会在第一行出现错误，即导出类...或@injectable

在最后一行出现错误的选择器上，即。右括号。

注意：我有如下所示的循环依赖警告：

Warning: Circular dependency detected:
src\app\modules\login\components\index.ts -> src\app\modules\login\components\index.ts

Warning: Circular dependency detected:
src\app\modules\login\layouts\index.ts -> src\app\modules\login\layouts\index.ts

Warning: Circular dependency detected:
src\app\modules\main\components\index.ts -> src\app\modules\main\components\index.ts

Warning: Circular dependency detected:
src\app\modules\main\guards\index.ts -> src\app\modules\main\guards\index.ts

以下是版本详情：

   Angular CLI: 11.0.6
Node: 12.18.3
OS: win32 x64

Angular: 11.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.6
@angular-devkit/build-angular   0.1100.6
@angular-devkit/core            11.0.6
@angular-devkit/schematics …