如何使用 redux-thunk`bindActionCreators` [英] how to `bindActionCreators` with redux-thunk

问题描述

我对 JavaScript 和 react-native 很陌生，我有需要添加功能的现有项目.它使用 redux 和 redux-thunk 和 redux-saga 来发送 API 请求.目前它只支持每个组件 1 个 dispatch 函数，我需要 dispatch 向 saga 发送几种类型的请求.我正在尝试 bindActionCreators 将 dispatch 添加到商店但无济于事..我完全迷失在 mapDispatchToProps 部分以及如何做之后我启动行动"..

I am quite new to JavaScript and react-native and I have existing project that I need to add functionality to. It is using redux and redux-thunk with redux-saga to send API requests. Currently it supports only 1 dispatch function per component and I need to dispatch several types of requests to the saga. I am trying to bindActionCreators to add the dispatch to the stores but to no avail.. I am totally lost on the mapDispatchToProps part and how do I "fire the action" afterwards..

在单独发送到道具时，我是这样做的:

in single dispatch to props, I did this:

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

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

并且我可以在 MainPage.render() 组件中访问函数"(这是正确的术语吗?至少我的传奇被调用了):

and I can "access the function" (is this the right term? at least my saga gets called) inside the MainPage.render() component :

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

但是当我改用 bindActionCreators 时，我无法再在 props 中访问它(我尝试了很多不同的实验，我几乎放弃了)

but when I change to use bindActionCreators, I cannot access it in the props anymore (I have tried so many different experiments I almost give up)

以下是我构建多个分派的方式:

Here is how I construct my multiple dispatches:

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:

I am trying to access the actions like this:

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

提前致谢！

推荐答案

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

connect takes four arguments...most people usually only need the first two.

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

mapStateToProps you have, and I'm assuming it's a function.

mapDispatchToProps 是第二个......问题就在这里.

mapDispatchToProps is the second...the issue is there.

bindActionCreators 只是一个代码循环...省略它，您将更好地了解正在发生的事情.

bindActionCreators is nothing but a for loop...leave it out and you will better understand what is happening.

试试这个:

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，语法将是:

If you insist on using the overrated bindActionCreators the syntax would be:

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

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

Also, use const instead of let since you are not redefining the value. It is also best to export the connected component under a different name than the class name of the component.

这篇关于如何使用 redux-thunk`bindActionCreators`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！