reactjs - 在使用 redux-observables 开始另一个史诗之前,如何等待不同的史诗完成并更新商店?
问题描述
在我的场景中,当应用程序加载时,我调度了一个启动史诗以创建 API 实例的操作,这是进行其他 API 调用所必需的:
const connectApiEpic: Epic = (action$, state$) =>
action$.pipe(
ofType('CONNECT_API'),
mergeMap(async (action) => {
const sdk = await AppApi.connect({ url: apiUrl });
return { type: 'SET_API', payload: api };
})
);
UI 已加载,API 连接发生在后台。现在,如果用户单击某个搜索按钮,我必须调度另一个动作(史诗)来执行搜索,这需要 API 已经连接。
基本上,我需要做类似的事情:
const searchItem: Epic = (action$, rootState$) =>
action$.pipe(
ofType('SEARCH_ITEM'),
mergeMap(async (action) => {
const { api } = rootState$.value;
const item = await api.search(action.item);
return { type: 'SET_ITEM', payload: item };
})
);
但是,直到 API 从connectApiEpic
.
使用 redux-observables 和 rxjs,如何才能:
- 在应用程序启动时在后台连接 api(已解决)
- 如果用户点击了“搜索”,就派出一个epic进行搜索,但是要先连接api,或者如果api已经连接,则继续搜索
解决方案
所以,如果api
你需要在searchItem
史诗中等待,我认为这将是一种方法:
const searchItem: Epic = (action$, rootState$) =>
action$.pipe(
ofType('SEARCH_ITEM'),
mergeMap(
// waiting for the api to connect first
// if it's already there, everything will happen immediately
action => rootState$.pipe(
map(state => state.api)
filter(api => !!api),
),
),
mergeMap(
api => from(api.search(action.item)).pipe(
map(item => ({ type: 'SET_ITEM', payload: item }))
)
)
);
推荐阅读
- amazon-web-services - S3 预签名上传 url 错误
- putty - 如何防止用户在作业运行时关闭 Putty 会话
- javascript - TypeScript - fe setInterval 是什么类型
- c# - EF 代码优先:从中心多对多关系表中删除额外的外键
- reactjs - 是否可以在 reactjs 中使用属性文件进行翻译
- php - Hoare 分区方案返回错误的索引
- spring - spring框架model和view中双冒号是什么意思?
- python - 如何在 TKinter 列表框中移动选择多个项目?
- c - C libpcap API 提取 DNS 查询
- jakarta-ee - 为什么 WSO2 API Manager 有时会出错:代理错误代理服务器收到来自上游服务器的无效响应?