gpt4 book ai didi

angular - Ngrx 在 http 请求后显示成功或错误消息或重定向的正确方法

转载 作者:行者123 更新时间:2023-12-03 22:12:07 26 4
gpt4 key购买 nike

我有一个 ionic 3 应用程序 我在哪里使用 ngrx/storengrx/effects用于副作用或异步操作。一切正常,但有一个小问题。

调度操作后,我应该何时调用错误或成功消息。我知道效果工作是根据组件的已分派(dispatch) Action 来分派(dispatch)另一个 Action 。但是我应该把它放在哪里?

下面是我的 示例 reducer .ts

mport { LOGIN_REQUEST, LOGIN_FAILED, LOGIN_SUCCESS } from './../actions/authenticate';
import { AuthState } from './../store';
import { Action } from '@ngrx/store';
import { PostState } from '../store';

const initialState: AuthState = {
isAuthenticated: false,
authenticating: false,
token: null,
error: null
}

export function authReducer(state = initialState, action: Action) {
switch (action.type) {
case LOGIN_REQUEST:
return {
...state,
authenticating: true,
// USERS: (<any>action).data.USERS
}
case LOGIN_SUCCESS:
return {
...state,
authenticating: false,
isAuthenticated: true,
token: (<any>action).payload.data.token
}
case LOGIN_FAILED:
return {
...state,
authenticating: false,
error: (<any>action).payload
}
default:
return state;
}
}

在我的 效果.ts
@Effect()
authenticate$ = this.actions$.ofType(authActions.LOGIN_REQUEST)
.pipe(
switchMap((data: any) => {
return this.authApi.signIn(data.payload).pipe(
map((response: any) => ({ type: authActions.LOGIN_SUCCESS, payload: response })),
catchError(error => of({ type: authActions.LOGIN_FAILED, payload: error }))
)
})
)

在我的 应用程序模块
imports: [
...
StoreModule.forRoot(rootReducer, { metaReducers }),
EffectsModule.forRoot(effects),
StoreDevtoolsModule.instrument({
maxAge: 5
})
],

最后在我的 组件.ts
ionViewWillEnter() {
this.store.select<any>('auth').subscribe(state => {
this.auth = state
if (state.error) this.displayErrorMessage()
})
}



displayErrorMessage() {
const toast = this.toastCtrl.create({
message: 'Error occured',
duration: 3000,
position: 'top'
});

toast.onDidDismiss(() => {
console.log('Dismissed toast');
});

toast.present();
}

如果您熟悉 还原 你知道你会理解上面 中的代码 reducer 效果 .一切正常,但我认为我的 中存在小问题组件 关于何时调用成功或错误消息?我应该在效果中调用它吗?但是如何?

感谢有人可以帮助提供代码示例。
提前致谢。

最佳答案

你可以注入(inject) ActionsSubject进入组件并监听成功或失败的操作,但我不建议这样做。

相反,还使用效果来显示通知,例如带 Angular Material snackbar :

@Effect({ dispatch: false })
error = this.actions.pipe(
ofType<ServerError>(ActionTypes.ServerError),
map(({ payload }) => {
this.snackBar.open(payload.message, 'Close');
})
)

欲了解更多信息,请参阅 Start using ngrx/effects for this

关于angular - Ngrx 在 http 请求后显示成功或错误消息或重定向的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53494212/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com