如何组合多个 Redux Saga 调用

Question

如何合并需要在其他页面上单独使用的 2 个 saga 调用？

我已经根据其他 SO 答案尝试了一些事情（yield all 等），但我无法达到预期的结果。

我有如下所示的 saga，我的应用大部分工作正常。在个人 Collection 和 Collection 页面上，我没有遇到任何问题。但是，我有一个页面是 Collection 和 Collection 的组合。在 Collection 返回后，我的 Saga 在第二次 saga 调用 returns 结果之前将 setLoader 设置为 false Collection，这意味着我的加载器行为不正确。

我确定我可以为 GET_BOTH 添加另一个 duck/middleware，*loadBoth 可以完成，但我想避免这种情况。

如有任何建议，我们将不胜感激。谢谢

import { fork, call, put, take } from "redux-saga/effects";
import { setLoader } from "../ducks/loader";
import { types as collectionsTypes, actions as collectionsActions } from "../ducks/collections";
import { types as collectionTypes, actions as collectionActions } from "../ducks/collection";
import { 
    getCollectionsApiRequest,
    getCollectionApiRequest
} from "../services/api";

export function* loadInitialCollections(query = "") {
    try {
        yield put(setLoader(true));
        const collectionsResult = yield call(getCollectionsApiRequest, query);

        yield put(collectionsActions.getCollectionsSuccess({
            collections: collectionsResult.data,
            feature: collectionsTypes.COLLECTIONS
        }));
        yield put(setLoader(false));

    } catch(e) {
        console.log(e);
    }
}

export function* loadInitialCollection(query = "") {
    try {
        yield put(setLoader(true));
        const collectionResult = yield call(getCollectionApiRequest, query);

        yield put(collectionActions.getCollectionSuccess({
            collection: collectionResult.data,
            feature: collectionTypes.COLLECTION
        }));
        yield put(setLoader(false));

    } catch(e) {
        console.log(e);
    }
}


export function* watchGetCollectionsRequest() {
    while(true) {
        const { query } = yield take(collectionsTypes.GET_COLLECTIONS);
        yield fork(loadInitialCollections, query);
    }
}

export function* watchGetCollectionRequest() {
    while(true) {
        const { query } = yield take(collectionTypes.GET_COLLECTION);
        yield fork(loadInitialCollection, query);
    }
}

const salesSaga = [
    fork(watchGetCollectionsRequest),
    fork(watchGetCollectionRequest)
];

export default salesSaga;

Answer 1

您可以直接使用 call 调用 saga what is resolve by action，而不是对 action put 执行 put，感谢它会等待 unit saga getCollectionSuccess 就完事了。

如何组合多个 Redux Saga 调用

How to combine multiple Redux Saga calls

reactjs

react-native

redux

redux-saga