gpt4 book ai didi

angular - ngrx - 有条件地停止/删除效果/ Action

转载 作者:行者123 更新时间:2023-12-01 22:19:56 29 4
gpt4 key购买 nike

我目前正在使用 Ionic2 和 ngrx 构建应用程序,如果没有网络连接,我会尝试停止 certian 操作。

停止是指以某种方式让它们对其他 Effects 和商店不可见,或者阻止它们进一步“传播”。

有没有办法做这样的事情?

@Effect()
checkNetworkConnection$ = this.actions$
.ofType(book.ActionTypes.LOAD_BOOKS, book.ActionTypes.CREATE_BOOK)
.if(Network.connection === 'none')
.do(() => new ShowNetworkAlertAction()) //Returns ShowNetworkAlertAction
.stopPropagation(); // Removes the Action from the stream

stopPropagation() 应该以某种方式从流中“删除”Action,之后它应该就像从未分派(dispatch)过的 action 一样。即使是商店也不应更改任何内容或执行将在此操作上执行的代码。

最佳答案

一种解决方案是将网络在线/离线添加到状态(或以其他方式将其作为可观察流提供)。然后你可以在你的效果中使用 takeUntil,当你离线时需要忽略 Action 。

本着上面例子的精神,你可以尝试这样的事情(未经测试,但应该接近):

// NOTE: This effect listens for `LOAD_BOOKS` command actions, and emits the
// `PROGRESS` and either `LOAD_BOOKS_SUCCESS` or `LOAD_BOOKS_FAILURE` event actions
// that the reducers will listen for.
@Effect()
loadBooksWhenOnline$ = this.actions$
.ofType('LOAD_BOOKS')
.map(action => action.payload)
.withLatestFrom(this.store$)
.filter(([payload, state]) => state.network.status === 'online')
.switchMap(([payload, state]) => {
const networkOffline$ = this.actions$.ofType('NETWORK')
.filter(action => action.payload === 'offline');

const someOtherReasonToCancel$ = this.actions$.ofType('CANCEL');

const stop$ = Observable.merge(networkOffline$, someOtherReasonToCancel$);

return Observable.concat(
Observable.of({ type: 'PROGRESS', payload: { isLoading: true } }),
this.bookService.getBooks$(payload)
.map(books => ({ type: 'LOAD_BOOKS_SUCCESS', payload: books }))
.catch(err => Observable.of({ type: 'LOAD_BOOKS_FAILURE', payload: { payload, err })
.takeUntil(stop$),
Observable.of({ type: 'PROGRESS', payload: { isLoading: false } }),
);
})
.observeOn(async); // may want this, depending on how your actions interact

// elsewhere in reducerville
export function reducer(state, action) {
switch (action.type) {
case 'LOAD_BOOKS_SUCCESS':
return reduceLoadBooksSuccessAction(state, action);
case 'LOAD_BOOKS_FAILURE':
return reduceLoadBooksFailureAction(state, action);
case 'PROGRESS':
return Object.assign({}, state, {
progress: Object.assign({}, state.progress, action.payload)
});
// ...
default:
return state;
}
}

初始过滤器检查状态只是为了确保您确实在线,然后通过 takeUntil 离线。我还添加了一个额外的 CANCEL 操作,只是为了展示如何因多种原因停止效果。

另外,上面的例子假设了一个模型,其中 effects 处理“请求” Action (即命令),而 reducer 是处理“结果” Action (即事件)的纯函数。

更新 2:好的,我根据要求添加了一个简单的 isLoading 进度标志和相应的 reducer。具体来说,添加的 Observable.concat 调用用 isLoading 状态更改包装图书服务查询。进度操作也可以有其他进度标志,此示例仅更新 isLoading 属性。

关于angular - ngrx - 有条件地停止/删除效果/ Action ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40870990/

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