如何使用 redux-thunk `bindActionCreators`

Posted 2023-02-22

【中文标题】如何使用 redux-thunk `bindActionCreators`

【英文标题】：how to `bindActionCreators` with redux-thunk

【发布时间】：2018-05-01 21:15:53

【问题描述】：

我对 javascript 和 react-native 还是很陌生，我有一个需要添加功能的现有项目。它使用redux 和redux-thunk 和redux-saga 来发送API 请求。目前它每个组件只支持 1 个dispatch 函数，我需要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');

提前致谢！

【参考方案1】：

connect 接受四个参数...大多数人通常只需要前两个。

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

mapDispatchToProps 是第二个...问题就在那里。

bindActionCreators is nothing but a for loop...把它放在一边，你会更好地理解正在发生的事情。

试试这个：

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，因为您没有重新定义值。最好以与组件的类名不同的名称导出连接的组件。

【讨论】：

感谢您的解释！我根本不知道另一种方式，谷歌搜索只显示bindActionCreators，我认为这是唯一的方式，大声笑..顺便说一句，我试过你的bindActionCreators方式，它不起作用，来自@直接返回 bindActionCreators 的结果的磁力虽然有效

这个答案有错别字。 “mapDispathToProps”应该是“mapDispatchToProps”。我试过编辑，但编辑必须至少有 6 个字符。评论让那些复制粘贴最终代码块的人不会感到沮丧。

【参考方案2】：

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

在您的render() 函数中，您可以像这样直接调用dispatch：

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

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

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

我知道这不是答案，但这只是一种可行的替代方法

【参考方案3】：

在您的 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 动作创建者使用这种方法。

【讨论】：

谢谢！我被 thunk 蒙蔽了双眼，函数内部有这么多参数和函数，我不知道你可以把所有东西都 x, y, z 放在一起。这是另一个很好的答案，但很抱歉我刚刚接受了一个答案..