如何等待另一个史诗完成和存储更新,然后再开始另一个史诗与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 };
})
);

但是,在connectApiEpic的存储中设置API之前,这将无法工作。

使用redux-observables和rxjs,怎么可能:

  1. 在应用程序启动时连接api,在后台(已经解决)
  2. 如果用户点击"搜索",调度史诗搜索,但等待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 }))
)
)
);

相关内容

最新更新