我在努力工作redux-observable，试图弄清楚如何用此流程创建史诗：
GET_ITEMS_REQUEST动作GET_ITEM_DETAILS_REQUEST操作，该操作将发送另一个HTTP请求以获取这些项目的更多详细信息GET_ITEMS_SUCCESS操作，这将更新redux状态从第3步到第4步是我遇到的问题。我知道如何GET_ITEM_DETAILS_REQUEST使用商品ID进行分派，但是我不知道如何监听/订阅GET_ITEM_DETAILS_REQUEST操作以获取商品详细信息响应。
到目前为止，我有以下内容：
function getItemsEpic(action$) {
return action$
// step 1
.ofType('GET_ITEMS_REQUEST')
.mergeMap(() => {
// step 2
return Observable.from(Api.getItems())
})
.mergeMap((items) => {
// step 3
const itemIds = items.map((item) => item.id);
return Observable.of({
type: 'GET_ITEM_DETAILS_REQUEST',
ids: itemIds
});
})
// ... what now?
.catch(() => {
return Observable.of({
type: 'GET_ITEMS_FAILURE'
});
});
}
一种方法是，在收到项目后，开始收听GET_ITEM_DETAILS_FULFILLED，然后立即GET_ITEM_DETAILS_REQUEST使用开始startWith()。另一部史诗将查找详细信息并发出GET_ITEM_DETAILS_FULFILLED我们的另一部史诗正在耐心等待的内容，然后将这两个（项目+细节）压缩在一起。
const getItemDetailsEpic = action$ =>
action$
.ofType('GET_ITEM_DETAILS_REQUEST')
.mergeMap(({ ids }) =>
Observable.from(Api.getItemDetails(ids))
.map(details => ({
type: 'GET_ITEM_DETAILS_FULFILLED',
details
}))
);
const getItemsEpic = action$ =>
action$
.ofType('GET_ITEMS_REQUEST')
.mergeMap(() =>
Observable.from(Api.getItems())
.mergeMap(items =>
action$.ofType('GET_ITEM_DETAILS_FULFILLED')
.take(1) // don't listen forever! IMPORTANT!
.map(({ details }) => ({
type: 'GET_ITEMS_SUCCESS',
items: items.map((item, i) => ({
...item,
detail: details[i]
// or the more "safe" `details.find(detail => detail.id === item.id)`
// if your data structure allows. Might not be necessary if the
// order is guaranteed to be the same
}))
}))
.startWith({
type: 'GET_ITEM_DETAILS_REQUEST',
ids: items.map(item => item.id)
})
)
);
另外，我注意到您将您catch()放在可观察的外部链上。这可能不会完全完成您想要的操作。当错误到达最上层链时，您的整个史诗将被终止，它将不再监听未来GET_ITEMS_REQUEST！这是一个非常重要的区别，我们通常称其为“隔离您的可观察链”。您不希望错误传播得比其应有的程度更大。
// GOOD
const somethingEpic = action$ =>
action$.ofType('SOMETHING')
.mergeMap(() =>
somethingThatMayFail()
.catch(e => Observable.of({
type: 'STUFF_BROKE_YO',
payload: e,
error: true
}))
);
// NOT THE SAME THING!
const somethingEpic = action$ =>
action$.ofType('SOMETHING')
.mergeMap(() =>
somethingThatMayFail()
)
.catch(e => Observable.of({
type: 'STUFF_BROKE_YO',
payload: e,
error: true
}));
有时您确实希望抓住外链，但这通常是最后一回事，仅适用于无法恢复的错误。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句