reactjs - 在运行下一个代码之前,React Saga Yield 调用未完成
问题描述
我在这里有一个反应传奇代码,它不按顺序运行:
yield put({ type: 'SHOW_LOADER', loading: 'workflowobject' }) #yield to initiate the loader
const states = yield call(() => axiosInstance.get(`/workflow-object/state/list/${action.workflow_id}/${action.workflow_object_id}/`))
const newState = states.data.map(item => ({ // some operation to shape my data , might this be the issue?
iteration: item.iteration,
...item.state
}));
yield put({ type: "STORE_WORKFLOW_DATA", payload: newState , fetch: 'workflowobject' , label: 'states'})
.....
bunch more of yields here
.....
yield put({ type: 'HIDE_LOADER', loading: 'workflowobject' }) #yield to change loader state
这里的问题是HIDE_LOADER
在一些中间操作结束之前调用了,导致在我的组件中发现错误
这是我的整个代码片段:
佐贺
// This code loads the transitions and states for the detail page //
export function* workerWorkflowObjectDetail(action) {
try{
yield put({ type: 'SHOW_LOADER', loading: 'workflowobject' })
// clears the object states
yield put({ type: 'CLEAR_OBJECT_STATES' })
// store workflow_id
yield put({ type: "STORE_WORKFLOW_DATA", payload: action.workflow_id , fetch: 'workflowobject' , label: 'workflow_id'})
const transitions = yield call(axiosInstance.get , `/workflow-object/transition/list/${action.workflow_id}/${action.workflow_object_id}/`)
// store transitions
yield put({ type: "STORE_WORKFLOW_DATA", payload: transitions.data, fetch: 'workflowobject' , label: 'transitions'})
const newStateMap = {}
transitions.data.forEach(transition => {
if (transition.is_done) {
newStateMap[transition.source_state] = done_class
newStateMap[transition.destination_state] = selected_class
} else if (transition.is_cancelled) {
newStateMap[transition.destination_state] = cancelled_class
} else {
newStateMap[transition.destination_state] = default_class
}
});
// store state_class_mapping
yield put({ type: "STORE_WORKFLOW_DATA", payload: newStateMap, fetch: 'workflowobject' , label: 'state_class_mapping'})
const states = yield call(axiosInstance.get, `/workflow-object/state/list/${action.workflow_id}/${action.workflow_object_id}/`)
const newState = states.data.map(item => ({
iteration: item.iteration,
...item.state
}));
// stores states
yield put({ type: "STORE_WORKFLOW_DATA", payload: newState, fetch: 'workflowobject' , label: 'states'})
// stores object_id
yield put({ type: "STORE_WORKFLOW_DATA", payload: action.workflow_object_id, fetch: 'workflowobject' , label: 'object_identifier'})
// stores current_state
const current_state = yield call(axiosInstance.get,`/workflow-object/current-state/${action.workflow_id}/${action.workflow_object_id}/`)
yield put({ type: "STORE_WORKFLOW_DATA", payload: current_state.data, fetch: 'workflowobject' , label: 'current_state'})
// stores current iteration
const current_iteration = yield call(axiosInstance.get,`/workflow-object/current-iteration/${action.workflow_id}/${action.workflow_object_id}/`)
yield put({ type: "STORE_WORKFLOW_DATA", payload: current_iteration.data, fetch: 'workflowobject' , label: 'current_iteration'})
yield put({ type: 'HIDE_LOADER', loading: 'workflowobject' })
} catch(err){
console.log(err)
}
if (action.message) {
yield put({ type: "CREATE_MESSAGE", message: action.message })
}
}
减速器
// Helpers
const storeData = (state, action) => {
switch (action.fetch) {
case 'workflowobject': return loadWorkflowObject(state, action)
}
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'STORE_WORKFLOW_DATA': return storeData(state, action);
case 'CLEAR_OBJECT_STATES': return clearObjectStates(state, action);
default:
return state;
}
}
export default reducer;
解决方案
根据redux-saga
文档,call(fn, ...args)
函数应提供普通函数或生成器函数。
yield call(() => axiosInstance.get(`/workflow-object/state/list/${action.workflow_id}/${action.workflow_object_id}/`))
从您的代码看来,第一个参数既不是返回 Promise 的普通函数,也不是生成器函数。如果结果既不是 Iterator 对象也不是 Promise,中间件会立即将该值返回给 saga,以便它可以同步恢复执行。据我了解,这可能是问题所在。
因此,不要提供调用 API 的箭头函数,而是尝试提供这种方式,
yield call(axiosInstance.get, `/workflow-object/state/list/${action.workflow_id}/${action.workflow_object_id}/`)
希望这有助于解决您面临的问题。
推荐阅读
- java - Java从包含Intellij中包含双精度数组的对象的对象数组中访问数组元素
- laravel - php artisan 在 Azure 上迁移(在 BitBucket 管道中)
- python - Python subprocess ignores backslash in convert command
- c++ - 如何根据精度轻松模板化数学函数?
- python - 如何在python中分离混合词(波斯语和英语)
- javascript - Threejs / EffectComposer - 交互式遮罩 UnrealBloomPass
- c++ - 我需要帮助用 C++ 编写几何系列
- c# - 如何在 RestSharp 中使用 ExecuteAsync 返回变量
- html - 使用 NGINX 从链接中删除 .html
- c# - 单击时如何删除按钮图像并将图像更改为其他图像