javascript - 如何显示成功消息 NgRX 效果和调度事件

Question

reducer :

export const reducer = (state = initialstate, action: any) => {
  switch (action.type) {
    case ADD_USER: {
      return {
        ...state,
        userAdded: false
        }
      },
    case ADD_USER_SUCCESS: {
      return {
        ...state,
        user: action.payload
        userAdded: true
        }
      },
    case ADD_USER_FAIL: {
      return {
        ...state,
        userAdded: false
        }
      }  
    }
}

影响:

login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserAction.ADD_USER),
      exhaustMap(action =>
        this.userService.addUser("USER").pipe(
          map(user => UserAction.AddUserSuccess({ "user" })),
          catchError(error => of(UserAction.AddUserFail({ error })))
        )
      )
    )
  );

组件.ts:

onClickAddUser(): void {
  this.store.dispatch(new AddUser('USER'));
  this.store.pipe(select(getUser), take(1)).subscribe((isUserAdded) => {
    if(isUserAdded) {
      this.router.navigateByUrl('/success'); // Expectation is to navigate to success page
    } else {
      this.router.navigateByUrl('/home'); // for first time it's always going to home screen even the success action being dispatched and the value been set to true.
    }
  });
}

在点击该方法时，一个 Action 被调度并跟进一个效果，我的情况是 api 调用成功并且一个成功 Action 也被调度(在我的 reducer 中，我将一个标志设置为 true)，就在 AddUser Action 之后从 click 方法分派(dispatch)，我订阅了标志 (isUserAdded)将用户导航到 /success如果 API 返回成功响应，则屏幕，在我的情况下，当我订阅标志时，它没有在商店中更新，因此用户导航到主屏幕(但期望导航到成功屏幕，因为 API 是成功的)。是否可以等待商店中的值更新然后订阅它，或者是否有任何最佳实践来处理这种情况？
一旦成功操作被调度，我可以编写一个效果来导航用户，但我的意思是，一旦标志设置为真，我确实有其他功能要处理，因此必须在组件中执行所有操作。

Answer 1

事件顺序如下:

您发送 AddUser行动

this.store.dispatch(new AddUser('USER'));

调用 Reducer，状态发生突变，userAdded设置为 false

    case ADD_USER: {
      return {
        ...state,
        userAdded: false
        }
      },

调用选择器并通知订阅者，但您还没有任何订阅

效果ADD_USER被调用并将异步请求发送到 userService

login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserAction.ADD_USER),
      exhaustMap(action =>
        this.userService.addUser("USER").pipe(
          map(user => UserAction.AddUserSuccess({ "user" })),
          catchError(error => of(UserAction.AddUserFail({ error })))
        )
      )
    )
  );

您订阅getUser带有 take(1) 的选择器管道中的运算符(operator)

  this.store.pipe(select(getUser), take(1)).subscribe((isUserAdded) => {
    if(isUserAdded) {
      this.router.navigateByUrl('/success');
    } else {
      this.router.navigateByUrl('/home');
    }
  });

选择器返回 userAdded 的值来自商店的标志false ，你的回调函数被调用，订阅被take(1)取消接线员

路由器导航到“/home”

来自 userService 的回复返回和 userAdded标志设置为 true但您的订阅已取消

如果您想要一个简单的解决方案，请访问 component.ts ，请尝试使用 take(2), skip(1) 订阅:

  this.store.pipe(select(getUser), take(2), skip(1)).subscribe((isUserAdded) => {
    if(isUserAdded) {
      this.router.navigateByUrl('/success');
    } else {
      this.router.navigateByUrl('/home');
    }
  });