第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何顯示成功消息 NgRX Effects 和調(diào)度事件

如何顯示成功消息 NgRX Effects 和調(diào)度事件

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

3 回答

?
aluckdog

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個贊

事件的順序如下:


你發(fā)送一個AddUser動作

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

Reducer 被調(diào)用,狀態(tài)被改變并被userAdded設(shè)置為false

    case ADD_USER: {

      return {

        ...state,

        userAdded: false

        }

      },

調(diào)用選擇器并通知訂閱者,但您還沒有任何訂閱

調(diào)用EffectADD_USER并將異步請求發(fā)送到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 })))

        )

      )

    )

  );

您在管道中訂閱帶有g(shù)etUser運(yùn)算符的選擇器take(1)

  this.store.pipe(select(getUser), take(1)).subscribe((isUserAdded) => {

    if(isUserAdded) {

      this.router.navigateByUrl('/success');

    } else {

      this.router.navigateByUrl('/home');

    }

  });

userAdded選擇器從商店返回標(biāo)志的值false,您的回調(diào)函數(shù)被調(diào)用,訂閱被take(1)運(yùn)營商取消

路由器導(dǎo)航到“/home”

來自的響應(yīng)userService已返回且userAdded標(biāo)志設(shè)置為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');

    }

  });


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

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個贊

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



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

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個贊

我想你可以分派多個動作,你必須創(chuàng)建單獨(dú)的動作來處理路由。


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

          ])

        )

      )

    )

  );


查看完整回答
反對 回復(fù) 2023-04-27
  • 3 回答
  • 0 關(guān)注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號