Question

我正在从我的一个组件中调用一个动作，并试图重构该动作，以便不编写大量的冗余代码。但是，每当我向动作传递多个参数时（或者即使我传递单个参数但作为数组或对象传递），我都会收到“动作必须是普通对象”错误。我正在使用Redux Thunk，但令人困惑的是async函数被抽象掉了，所以应该没有问题。

首先，这是起作用的作用：

这是组件中的调度调用

const dispatch = useDispatch();

dispatch(fetchExposure(fundIds[value]))

操作如下：

export const fetchExposure = fundName =>
  getIndividualFundData(
    SERVER_URL + `fund_gem_data/${fundName}`,
    fundName,
    "exposure"
  );

和getIndividualFundData看起来像这样：

function getIndividualFundData(
  url,
  data,
  area
) {
  console.log("getind called")
  console.log(url, data, area)
  return dispatch => {
    dispatch(fetchBegin(data, "FETCH_INDIVIDUAL_FUND_BEGIN", area));
    return fetch(url)
      .then(handleErrors)
      .then(res => res.json())
      .then(json => {
        dispatch(fetchSuccess(json, data, "FETCH_INDIVIDUAL_FUND_SUCCESS", area));
        return json;
      })
      .catch(error => dispatch(fetchFailure(error, data, "FETCH_INDIVIDUAL_FUND_FAILURE", area)));
  };
}

一切正常。

现在，不起作用。。我要做的是在操作中传递json url（“ fund_gem_data”位）以及商店区域（“ exposure”）），以使该操作可在商店的其他部分重复使用。

这是我写的动作：

export const fetchData = data => {
   const [fundName, jsonPrefix, storeArea] = data;
   console.log(fundName, jsonPrefix, storeArea)

    getIndividualFundData(
        SERVER_URL + `${jsonPrefix}/${fundName}`,
        fundName,
        storeArea
    );
}

然后在组件中调用它：

if (props.funds.funds.length) {
        let data = [ props.funds.funds[0].data[0][0], 
            "fund_gem_data", 
            "exposure"
            ]
      dispatch(fetchData(data));

    // dispatch(fetchExposure(props.funds.funds[0].data[0][0]))
    }

但是，即使我看不到代码有任何错误，这也会立即引发错误。我也尝试通过一个对象，这是行不通的。

从减速器的角度（以及从getIndividualFundData函数的角度），两者之间绝对没有差异。但是redux不允许我这样做。

所以我的问题是，为什么我传递给useDispatch（）的函数只能采用单个字符串作为参数？为什么不包含对象或数组？

如果有人可以为我澄清这一点，我将非常感谢。提前致谢。

Answer 1

找到它了-我没有在动作中返回函数，因此出现了问题...

错误：动作必须是普通对象，但看不到问题

1 个答案: