如何使用redux-thunk‘`bindActionCreators`’

Question

我对JavaScript和react非常陌生，我已经有了需要添加功能的现有项目。它使用redux和redux-thunk与redux-saga一起发送API请求。目前，它只支持每个组件一个dispatch函数，我需要对saga的几种类型的请求进行dispatch。我试图通过bindActionCreators将dispatch添加到商店中，但没有效果。我完全迷上了mapDispatchToProps的部分，然后我该如何“发动行动”呢？

在对道具的一次派遣中，我做到了以下几点：

let sdtp = (arg) => {
   return (dispatch) => {
     dispatch({
       type: 'GET_TEST_HASHMAP_SAGA',
       hashmap: arg
     })
   }
 }

export default MainPage = connect(
   mapStateToProps,
   { sdtp }
)(MainPage);

我可以“访问函数”(这是正确的术语吗？)至少我的传奇会在MainPage.render()组件中被调用)：

`this.props.sdtp({'hello':'world'});`

但是当我改变使用bindActionCreators时，我不能再在道具中访问它了(我尝试了很多不同的实验，我几乎放弃了)。

下面是我如何构造多个调度：

let action1 = (args) => {
   return (dispatch) => {
      dispatch({
         type: 'GET_TEST_HASHMAP_SAGA',
         hashmap: arg
      });
   }
}

let action2 = (args) => {
   return (dispatch) => {
      dispatch({
         type: 'GET_TEST_HASHMAP_SAGA2',
         params: arg
      });
   }
}

let action3 = (args) => {
   return (dispatch) => {
      dispatch({
         type: 'GET_TEST_HASHMAP_SAGA3',
         args: arg
      });
   }
}

let mdtp = (dispatch) => {
  return {
    actions: bindActionCreators(action1, action2, action3, dispatch)
  }
}

export default MainPage = connect(
   mapStateToProps,
       { mdtp }
)(MainPage);

我试图像这样访问actions：

this.props.mdtp.action1({arg: 'hello'});

提前感谢！

Answer 1

connect需要四个arguments...most，通常只需要前两个。

mapStateToProps，你有，我假设它是一个函数。

mapDispatchToProps是second...the的问题就在那里。

is nothing but a for loop...leave说出来，你就会更好地理解正在发生的事情。

试试这个：

function mapDispatchToProps(dispatch) {
  return {
     action1: (args) => dispatch(action1(args)),
     action2: (args) => dispatch(action2(args)),
  }
}

 export default MainPageContainer = connect(
   mapStateToProps,
   mapDispatchToProps
 )(MainPage)

并称其为this.props.action1(args)和this.props.action2(args)

如果您坚持使用被高估的bindActionCreators，语法将是：

 function mapDispatchToProps(dispatch){
   return {
     actions: bindActionCreators({
       action1,     
       action2,
     }, dispatch)
   }
 }

另外，使用const而不是let，因为您没有重新定义该值。还最好以与组件的类名不同的名称导出连接的组件。

Answer 2

在mpdt函数中，需要返回bindActionCreators调用的结果，而不是带有操作键的对象。

所以，应该是

const mdtp = (dispatch) => {
  return bindActionCreators({
    action1, action2, action3
  }, dispatch);
};

你可以叫他们this.props.action1(...)

从您的代码中也可以看出，您混淆了将操作创建者传递给组件的两种方法。有一种方法在上面描述过。另外，您可以使用对象符号将操作创建器直接传递给connect()，如下所示

export default MainPage = connect(
   mapStateToProps,
   { action1, action2, action3 }
)(MainPage);

会有同样的结果。您的第一种方法，使用sdtp动作创建者使用这种方法。

Answer 3

或者，您也可以完全跳过mapDispatchToProps。

在您的render()函数中，您可以直接调用dispatch，如下所示：

this.props.dispatch({type: 'GET_TEST_HASHMAP_SAGA2', params: {"hello": "world"}});

然后，在您的connect函数中，可以完全跳过mapDispatchToProps参数。

export default MainPage = connect(
   mapStateToProps
)(MainPage);

我知道这不是答案，但这也是一个可行的选择