如何使调度同步

Question

我有一个在点击按钮时执行的以下功能：-

const modelClick = async(modelcategory, modelname)=>{
const curr_model = allModels.filter(model => model.model === modelname && model.version === version)
console.log("curr_model= ", curr_model[0]);
await dispatch(setModel(curr_model[0]))
await dispatch(getModelsOfType(curr_model[0]['model category']))
console.log("models=", models);
let temp;
temp = models.filter(model => model.modelname === curr_model[0]['model_type'])
console.log("temp inside modelClick= ", temp);
}

dispatch(getModelsOfType(curr_model[0][‘model-classification’](：此函数查询dynamodb并更新全局redux状态‘models’。然后我想根据类型筛选模型。

我面临的问题是，在状态更新之前，调度下面的代码会被执行。它给出了一个错误，称模型未定义。我想同步运行它，这样过滤行只有在模型更新后才能执行。如何做到这一点？

以下是动作创建器函数：-

export const getModelsOfType=(modeltype)=> async(dispatch) => {
dispatch({
type: GET_MODELS_OF_TYPE_REQUEST
})
let params = {
model_type: modeltype
}
axios
.post(`${BACKEND_URL}get-models`, params, {
headers: {
"Content-Type": "application/json",
},
})
.then((res)=>{
console.log("DYNAMO DB RESULT= ", res.data.Items)
dispatch({
type: GET_MODELS_OF_TYPE_SUCCESS,
payload: res.data.Items
})
})
.catch((err) => {
console.log("err >>", err);
dispatch({
type: GET_MODELS_OF_TYPE_FAIL
})
});
}

Answer 1

而不是在组件中调度操作。您可以做的是在第一个操作中分派第二个操作，然后进行阻塞。

export const setModel=(your arguments)=> async(dispatch) => {
dispatch({
type: ACTION_REQUEST
})
axios
.post(// make API call)
.then((res)=>{
dispatch({
type: ACTION_SUCCESS,
payload: res
})
// now dispatch the second action here . 
dispatch(getModelsOfType(your arguments))
})
.catch((err) => {
console.log("err >>", err);
dispatch({
type: ACTION_FAILURE
})
});
}