angular - 选择器 NGRX 内的调度操作

标签 angular typescript redux rxjs ngrx

在我的选择器中,我正在检查商店中的数据是否已加载并对应于路由器参数。路由器是“真实来源”,所以如果没有加载数据,我想发送一个 Action 来获取它。在选择器中做这样的事情可以吗?

  (currentGameState, router): Game => {
     if (currentGameState.game.id === router.state.params.gameId && 
         currentGameState.isLoaded) {
         return currentGameState.game;
     }
  }

最佳答案

副作用由效果类处理(调度操作、调用 api 等)。

选择器仅用于使用异步从存储中获取数据。这意味着不会在此处执行任何副作用,例如 dispatch 操作。

正常更新需要在ngOnInit中初始化数据加载

export class PostComponent implements OnInit {
  public posts$: Observable<IPost[]>;
  constructor(private store: Store<IPostManagementState>) {}
  ngOnInit(): void {
    this.store.dispatch(new GetAllPosts());
    this.posts$ = this.store.pipe(select(selectPostList));
  }
}

然后在 View 中使用异步管道

<div *ngFor="let post of posts$ | async">{{ post.body }}</div>

可以查看代码here

关于angular - 选择器 NGRX 内的调度操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57924814/

相关文章:

angular - Angular 4 单元测试 detectChanges() 中未调用 ngOnChanges

Angular 服务 worker : start_url does not respond with a 200 when offline

javascript - Typescript - 高阶函数类型

typescript 输出顺序 - gulp 相当于 tsc with tsconfig.json

javascript - JavaScript/TypeScript 中的 3D UML 建模

javascript - 在另一个类中调用函数时, typescript 函数返回未定义

javascript - 使用 `` `for...in ``` 实现 mergeReducers ?

javascript - 在更新状态之前需要调用 Redux Action 两次?

javascript - Redux-thunk 与 redux-form - 不调度

javascript - 如何在 Angular4 中删除表中的行。删除按钮位于每一行