Question

我有一个连接到Redux的React应用。

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

在有状态组件的顶部，我按如下所示导入它：

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));

尽管没有错误，但它似乎从未真正执行过我的动作创建者。我从没在Redux开发工具中看到任何分派的动作，也没有从动作创建者函数内部看到任何console.logs。

如何连接动作创建者，使我也可以连接其他功能并且它们都起作用？

Answer 1

有多种使用mapDispatchToProps的方法。一种对您有效的方法是提供object作为mapDispatchToProps的方法，然后内部进行分派。

对您不起作用的第二种方法需要有一个分派的函数，而不仅仅是调用

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

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

Answer 2

您的问题在这里：

fetchSetupData: fetchSetup()

您需要使用

fetchSetupData: () => { fetchSetup(dispatch); }

Redux将调度连接到道具

2 个答案: