关于react native：如何使用redux-thunk对`bindActionCreators`进行操作


how to `bindActionCreators` with redux-thunk

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

在一次派发道具时，我这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
let sdtp = (arg) => {
   return (dispatch) => {
     dispatch({
       type: 'GET_TEST_HASHMAP_SAGA',
       hashmap: arg
     })
   }
 }

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

并且我可以在MainPage.render()组件内部"访问函数"(这是正确的术语吗？至少我的传奇人物被调用了)：

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

但是当我更改为使用bindActionCreators时，我再也无法在道具中使用它了(我尝试了很多不同的实验，但我几乎放弃了)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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'});

提前致谢！

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

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

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

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

尝试这个：

1
2
3
4
5
6
7
8
9
10
11
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，则语法为：

1
2
3
4
5
6
7
8
 function mapDispatchToProps(dispatch){
   return {
     actions: bindActionCreators({
       action1,    
       action2,
     }, dispatch)
   }
 }

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

相关讨论

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

所以应该

1
2
3
4
5
const mdtp = (dispatch) => {
  return bindActionCreators({
    action1, action2, action3
  }, dispatch);
};

您可以将它们称为this.props.action1(...)

从代码中还可以看出，您已经混淆了将操作创建者传递给组件的两种方法。上面描述了一种方式。另外，您可以使用对象符号将动作创建者直接传递给connect()

1
2
3
4
export default MainPage = connect(
   mapStateToProps,
   { action1, action2, action3 }
)(MainPage);

会有相同的结果。而您的第一种方法，与sdtp动作创建者一起，使用此方法。

相关讨论

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

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

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

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

1
2
3
export default MainPage = connect(
   mapStateToProps
)(MainPage);

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