如何修改NGR存储不在reducer中?

时间:2019-09-13 12:27:14

标签: angular ngrx ngrx-store ngrx-effects

在代码中,我有类似的内容:

this.store.dispatch(new LoadGame(id));

此操作由@Effect之一处理并触发new LoadGameSuccess(game)。比此游戏传递给reducer更新GameState。 但是,如何更改GameState以反映当前正在加载游戏?再执行一个动作并在减速器中处理它看起来不是很好。该应用程序变成“动作地狱” ... 我应该在@Effect中这样做吗?

1 个答案:

答案 0 :(得分:1)

不要试图违背设计模式。这样做是有原因的。

如果您基于某种其他逻辑采取的行动可能会或可能不会影响商店的状态,那么正确的操作方法就是监听行动,执行逻辑,然后调度新动作。

话虽如此-在商店和效果中,没有理由您无法处理LoadGame动作。像这样:

您的效果

@Effect()
  loadGame$ = this.actions$.pipe(
    ofType<LoadGame>(GameActions.LoadGame),
    mergeMap(url => this.http.get<Game>("http://wherever.you.get.your.game.data.from")
        .pipe(
            game => [new LoadGameSuccess(game), new AnyOtherActionsHere()]
        )
    )
);

您的减速器

export function reducer(state = initialState, action: GameActions): State {
  switch (action.type) {
    case GameActions.LoadGame:
      return {
        ...state,
        isGameLoading: true,
      };
    case GameActions.LoadGameSuccess:
      const { game } = action.payload
      return {
        ...state,
        game
        isGameLoading: false,
      };
    }
}

请注意,这里有no concern for a race condition in doing this