react-native - 如何使用redux-thunk `bindActionCreators`

Question

我对JavaScript和react-native还是很陌生，并且已经有需要添加功能的现有项目。它使用redux和redux-thunk和redux-saga发送API请求。当前，每个组件仅支持1个dispatch函数，而我需要dispatch对传奇的几种请求。我正在尝试bindActionCreators将dispatch添加到商店，但无济于事。.我完全迷失了mapDispatchToProps部分，之后如何“触发操作”。

在单次派发 Prop 时，我这样做是:

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时，我再也无法在 Prop 中使用它了(我尝试了很多不同的实验，但我几乎放弃了)

这是我构造多个调度的方法:

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接受四个参数...大多数人通常只需要前两个参数。

您拥有的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。最好以与组件的类名不同的名称导出连接的组件。