如何使用redux-thunk实现`bindActionCreators`

Question

我是一个很新的JavaScript和本地反应,我有一个我需要添加功能的现有项目.它使用redux并redux-thunk与redux-saga发送API请求.目前它dispatch每个组件只支持1个函数,我需要对dispatchsaga提出几种类型的请求.我试图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 有四个论点......大多数人通常只需要前两个.

mapStateToProps 你有,我假设它是一个功能.

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

bindActionCreators只不过是一个for循环 ...把它留下来你会更好地理解正在发生的事情.

试试这个:

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......你没有重新定义价值.最好以与组件的类名称不同的名称导出连接的组件.