Reactjs Redux将调度连接到道具

我有一个React应用程序连接到Redux

我有一个动作创建者，我用它来获取设置数据

在有状态组件的顶部，我将其导入为：

import { fetchSetup } from "../../store/actionCreators";

这是实际的fetchSetup（）函数：

export const fetchSetup = (clientID = 1) => async dispatch => {
  const clientIDObj = {
    user_id: clientID
  };
  await fetch(`${apiURLs.setup}`, {
    method: "post",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(clientIDObj)
  })
    .then(response => {
      return response.json();
    })
    .then(json => {
      console.log("fetchSetup()", json);
      dispatch({ type: actionTypes.FETCH_SETUP, payload: json });
    });
};

当我将其连接到Redux商店时，一切都很好：

export default connect(
  mapStateToProps,
  { fetchSetup }
)(withRouter(Landing));

然而，这是从各种教程等拼凑而成的代码。我正试图以我通常的方式连接另一个函数

const mapDispatchToProps = dispatch => {
  return {
    onUnauthenticated: () => dispatch({ type: actionTypes.UNAUTHENTICATED }),
    fetchSetupData: fetchSetup()
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Landing));

虽然没有错误，但它似乎从来没有真正执行过我的action creator。我从来没有在我的Redux开发工具中看到任何调度的操作，也没有在action creator函数中看到任何console.log

---

我如何连接我的action creator，以便我也可以连接其他功能并且它们都可以工作？

有多种方法可以使用

mapDispatchToProps

。对您有效的一种方法是将

对象

作为mapDispatchToProps提供，然后在内部进行redux并进行分派

第二种方法不适用于您，它需要有一个被分派的函数，而不仅仅是被调用的函数

const mapDispatchToProps = dispatch => {
  return {
    onUnauthenticated: () => dispatch({ type: actionTypes.UNAUTHENTICATED }),
    fetchSetupData: () => dispatch(fetchSetup())
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Landing));

---

使用

fetchSetupData:fetchSetup

进行连接时，如第一个示例所示，您将发送一个对象作为第二个参数进行连接，该参数如下：

{fetchSetup:fetchSetup}

但如果key和value变量具有相同的名称，则可以缩短该变量。您正在发送对函数的引用，而没有调用函数，这在本例中是正确的，因为我们只是“连接”函数而没有调用它们。在第二个示例中，您正在调用

fetchSetup

（使用

（）

）并存储

fetchSetup

@HarishSoni的内部返回函数。您的解决方案对我无效。您的解决方案是唯一对我有效的解决方案，谢谢！