如何使调度同步 [英] How to make dispatches synchronous
问题描述
我有一个在按钮点击时执行的函数:-
I have an the following function that is executed on button click:-
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 category'])) :该函数查询 dynamodb 并更新全局 redux 状态 'models'.然后我想根据类型过滤模型.
dispatch(getModelsOfType(curr_model[0]['model category'])) : This function queries the dynamodb and update the global redux state 'models'. I then want to filter the models based on type.
我面临的问题是调度下面的代码在状态更新之前被执行.它给出了一个错误,说模型未定义.我想同步运行它,以便仅在模型更新后才执行过滤器行.如何实现?
THE ISSUE i am facing is that the code below the dispatch gets executed before the state gets updated. It gives an error saying models is undefined. I want to run it synchronously so that the filter line gets executed only after models is updated. How can that be achieved ?
这是动作创建函数:-
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
})
});
}
推荐答案
而不是在组件中分派动作.你可以做的是在第一个动作中分派第二个动作然后阻止.
Instead of dispatching the action in the component. what you can do is dispatch the second action inside the first actions then block.
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
})
});
}
这篇关于如何使调度同步的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!