时间戳

首页 > 解决方案 > 如何修改不在减速器中的 NGRX 存储？

angular - 如何修改不在减速器中的 NGRX 存储？

问题描述

在代码中我有类似的东西：

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

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

标签： angularngrxngrx-storengrx-effects

解决方案

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

如果你有一个基于其他逻辑可能会或可能不会影响存储状态的操作，那么正确的方法是监听该操作，执行逻辑，然后调度一个新操作。

话虽这么说 - 你没有理由不能同时处理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,
      };
    }
}

请注意，这样做无需担心竞争条件。

推荐阅读