在redux saga中,可以使用循环迭代的方式从一个不知道大小的数组中进行连续的API调用。以下是一个示例代码:
import { call, put, takeEvery } from 'redux-saga/effects';
// 定义一个异步API调用函数
function* fetchData(url) {
try {
const response = yield call(fetch, url);
const data = yield response.json();
yield put({ type: 'FETCH_SUCCESS', payload: data });
} catch (error) {
yield put({ type: 'FETCH_ERROR', payload: error });
}
}
// 定义一个处理连续API调用的saga函数
function* fetchArrayDataSaga(action) {
const { array } = action.payload;
for (let i = 0; i < array.length; i++) {
yield call(fetchData, array[i]);
}
}
// 监听触发连续API调用的action
function* watchFetchArrayData() {
yield takeEvery('FETCH_ARRAY_DATA', fetchArrayDataSaga);
}
// 导出根saga函数
export default function* rootSaga() {
yield all([
watchFetchArrayData(),
// 其他saga函数...
]);
}
在上述代码中,fetchData
函数是一个异步的API调用函数,它使用call
效果来调用fetch
函数获取数据,并使用put
效果来触发相应的action。
fetchArrayDataSaga
函数是处理连续API调用的saga函数,它接收一个包含API地址的数组作为参数。通过使用for
循环迭代数组中的每个元素,并使用call
效果来调用fetchData
函数进行API调用。
watchFetchArrayData
函数用于监听触发连续API调用的action,当收到相应的action时,会调用fetchArrayDataSaga
函数。
最后,将watchFetchArrayData
和其他saga函数一起在根saga函数中使用all
效果进行组合,并导出根saga函数。
这样,在Redux中,当需要从一个不知道大小的数组中进行连续的API调用时,可以通过触发相应的action来启动这个saga流程。
没有搜到相关的文章