如何使调度同步

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 category']))：该函数查询 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
          })
      });
}

如何使调度同步

How to make dispatches synchronous

dispatch

reactjs

redux-thunk

react-redux