时间戳

首页 > 解决方案 > Redux Saga 等待进行 api 调用的动作创建者

javascript - Redux Saga 等待进行 api 调用的动作创建者

问题描述

我有一个动作创建者，正在像这样被监视：

yield takeLatest('actionCreator', actionFlow);

在文件 X 中。

在动作流内部有一个 api 调用和另一个调度来将此数据存储到存储中。

然后，从文件 Y 中，我有一个传奇，我想称之为actionCreator. 所以我去：

yield put({ type: 'actionCreator', etc.. });

但是，在此之后，我执行yield select(selector)选择器选择此数据并返回 null 的位置（就像在 api 调用之前一样。

有没有办法等待那个“ actionFlow”结束？

文件 X：

export const aCreator= ({ data, type }) => ({
    type: ACTION_A,
    payload: { data, type },
}); 


function* aFlow() {
   //api call
   //put
}

export default function*() {
    yield takeLatest(ACTION_A, aFlow);
}

文件 Y

import { aCreator } from 'fileX';

function* bFlow(){
    yield put(aCreator({ data }));

    const something = yield select(selector); //this should return the data saved in the reducer by aFlow but return null, as if it didn't wait for aFlow to finish.
}

export default function*() {
    yield takeLatest(ACTION_B, bFlow);
}

标签： javascriptredux-saga

解决方案

put是非阻塞的，所以它不会等到aFlow完成。

function* bFlow() {
   yield put(aCreator({ data }));

   const something = yield select(selector); // this will happen immediately
}

你可以在之前添加一个take效果select，所以它会等到调用aFlow完成。

function* bFlow() {
   yield put(aCreator({ data }));
   yield take(dispatched action from aFlow after api call);

   const something = yield select(selector); // will wait until aFlow finishes
}

调度的动作实际上可以是任何东西：

function* aFlow() {
   //api call
   //put
   yield put('api_finished');
}

function* bFlow() {
   yield put(aCreator({ data }));
   yield take('api_finished');

   const something = yield select(selector); // will wait until aFlow finishes
}

推荐阅读