亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何顯示成功消息 NgRX Effects 和調度事件

如何顯示成功消息 NgRX Effects 和調度事件

qq_笑_17 2023-04-27 16:37:34
減速器: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.    }  });}單擊該方法時,將分派一個動作并跟進一個效果,我的情況是 api 調用成功并且也分派了一個成功的動作(在我的 reducer 中我將標志設置為 true),緊接在 AddUser 動作之后從 click 方法發送,如果 API 返回成功響應,我訂閱標志以將用戶導航(isUserAdded)到屏幕,在我的情況下,當我訂閱標志時,它沒有在商店中更新,因此用戶導航/success到主屏幕(但期望是在 API 成功時導航到成功屏幕)。是否可以等待商店中的值更新然后訂閱它,或者是否有任何最佳實踐來處理這種情況?一旦成功操作被分派,我可以編寫一個效果來導航用戶,但我的意思是,一旦標志設置為真,我確實有其他功能要處理,因此必須在組件中做所有事情。
查看完整描述

3 回答

?
aluckdog

TA貢獻1847條經驗 獲得超7個贊

事件的順序如下:


你發送一個AddUser動作

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

Reducer 被調用,狀態被改變并被userAdded設置為false

    case ADD_USER: {

      return {

        ...state,

        userAdded: false

        }

      },

調用選擇器并通知訂閱者,但您還沒有任何訂閱

調用EffectADD_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)

  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');

    }

  });


查看完整回答
反對 回復 2023-04-27
?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

你不能只在你的效果 fn 中返回兩個動作,比如 UserAddedSuccess 并在 catchError UserAddedFail 中寫另一個效果,它將監聽 useraddedsuccess 動作并在成功時重定向所需的頁面,在第一個效果 catcherror 返回 UserAddedFail 動作和相同的過程?



查看完整回答
反對 回復 2023-04-27
?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

我想你可以分派多個動作,你必須創建單獨的動作來處理路由。


login$ = createEffect(() =>

    this.actions$.pipe(

      ofType(UserAction.ADD_USER),

      exhaustMap(action =>

        this.userService.addUser("USER").pipe(

          switchMap(user => [

            UserAction.AddUserSuccess({ "user" }),

            routeAction.routeto('success')

          ])

          ,catchError(error => [

            UserAction.AddUserFail({ error }),

            routeAction.routeto('Home');

          ])

        )

      )

    )

  );


查看完整回答
反對 回復 2023-04-27
  • 3 回答
  • 0 關注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號