如何在异步api thunk调用中传递参数

Question

[嗨，我正在尝试在redux thunk中间件的api调用中传递post方法的参数。但这不是在调用动作。有人可以看一下代码，然后告诉我我在做什么错误：

import API from "../../_metronic/utils/api";

let FetchActions = async (id,dispatch) => {
  await API.post("companies/",id)
    .then(res => dispatch({ type: "FETCH_COMPANIES", payload: res.data }))
    .catch(err => console.log(err));
};

export default FetchActions;

我收到以下错误：

TypeError: dispatch is not a function
    at fetchAction.js:6

Answer 1

import API from "../../_metronic/utils/api";

let FetchActions = id => async (dispatch, getState) => {
  await API.post("companies/",id)
    .then((res) => {
      dispatch({ type: "FETCH_COMPANIES", payload: res.data })
    })
    .catch((err) => {
      console.log(err)
    });
};

export default FetchActions;

Answer 2

您在语法上做错了，因为redux-thunk需要callback function才能从方法中返回。另一件事是，如果您使用的是await，则不需要.then和.catch，而是应将此代码包装在try-catch块中。

下面的代码应该适合您。

import API from "../../_metronic/utils/api";

let FetchActions = async (id) => {
  return async (dispatch, getState) => {
      try {
       const res = await API.post("companies/",id);
       dispatch({ type: "FETCH_COMPANIES", payload: res.data })
      } catch(err) {
         console.log(err)
      }
 }
};

export default FetchActions;

在redux-thunk here中了解有关动作创建者的更多信息。