如何将`bindActionCreators`与redux-thunk

问题描述：

我对JavaScript和react-native非常陌生，而且我现有的项目需要添加功能。它使用redux和redux-thunk与redux-saga来发送API请求。目前它仅支持每个组件1 dispatch函数，并且我需要dispatch对传奇的几种类型的请求。我想bindActionCreators添加dispatch到店，但无济于事..我完全失去了对mapDispatchToProps一部分，我怎么“火行动”之后..如何将`bindActionCreators`与redux-thunk

单牒道具

，我做这样的：

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'});

提前感谢！

答

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 mapDispathToProps(dispatch){ 
    return { 
    actions: bindActionCreators({ 
     action1,  
     action2, 
    }, dispatch) 
    } 
}

此外，使用const而不是let ......你不重新定义价值。最好以不同于组件类名称的名称导出连接的组件。

感谢您的解释替代！我不知道其他的方式，谷歌搜索只显示'bindActionCreators'，我认为这是唯一的方法，哈哈..顺便说一句，我试过你的'bindActionCreators'方式，它不工作，从@ magneticz返回'bindActionCreators'的结果直接工作，虽然 – Zennichimaro

答

在您的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}。这是另一个很好的答案，但遗憾的是我已经接受了答案。 – Zennichimaro

答

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

在您render()功能，你可以叫dispatch直接像这样：

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

然后在你的connect功能，你可以跳过完全参数mapDispatchToProps。

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

我知道这是不是问题的答案，但是这仅仅是作品，以及

如何将`bindActionCreators`与redux-thunk

相关推荐