代码之家 › 专栏 › 技术社区 › quirimmo

Redux:等待史诗般的动作完成

redux-observable react-redux redux typescript reactjs

0

quirimmo · 技术社区 · 6 年前

我在用 react + redux + redux-observable .

我有以下史诗般的行动:

export const fetchCompaniesEpic = (action$: Observable<Action>): Observable<Action> =>
    action$.pipe(
        ofType(FETCH_COMPANIES),
        take(1),
        switchMap((action: any) => WebServiceProxy.getCompanies().pipe(map((companies: Company[]) => fetchCompaniesFulfilled(companies))))
    );

它执行一些异步操作,然后调用“正常操作”,结果如下:

export const fetchCompaniesFulfilled = (companies: Company[]) => ({ type: 'FETCH_COMPANIES_FULFILLED', companies });

然后在我的容器中,我以这种方式发送史诗般的动作:

const mapDispatchToProps: any = (dispatch: Dispatch<Action>, ownProps: any) => ({
    fetchCompanies: (): void => {
        dispatch({ type: FETCH_COMPANIES });
    }
});

所有的一切都像一个魔咒,但我怎么知道史诗般的动作何时会结束呢?

我想做点像 dispatch({ type: FETCH_COMPANIES }).subscribe(...)

1 回复 | 直到 6 年前

1

0

quirimmo 6 年前

目前我已经完成了以下解决方案,我发布它是为了了解您的想法,并帮助其他人解决同样的问题。

我实现了一个thunk,实现了我想要的功能。

这是thunk动作:

export const fetchCompaniesThunk = () => {
    return (dispatch: any) => {
        return fetchCompanies().pipe(map((companies: Company[]) => dispatch(fetchCompaniesFulfilled(companies))));
    };
};

这是 fetchCompaniesFulfilled 行动:

export const fetchCompanies = (): Observable<any> => {
    return WebServiceProxy.getCompanies().pipe(take(1));
};

从容器中我可以做到:

dispatch(fetchCompaniesThunk()).subscribe((data: any) => {
    console.log('finished to fetch companies', data);
});

即使解决方案很有效,我也不是很满意。或者更好,我真正的问题是:为什么我需要 redux-observable ?