单个组件中的多个actionCreators

我想让多个actionCreators分派到一个组件中。我知道你可以用状态单个组件中的多个actionCreators

export default connect(
    (state: ApplicationState) => Object.assign({}, state.search, state.resources), 
    ResourcesState.actionCreators// i have another actionCreator I want to add 
)(Home) as typeof Home;

，但不能确定的语法与actionCreators做到这一点做到这一点。我已经读入

mapDispatchToProps

，但不知道如何实现。

来源

2017-09-15 Isaac Levin

mapDispatchToProps是connect中的第二个参数。因此，例如：

import customAction from 'actions-directory-in-your-app' 

const mapStateToProps =() => {} // no implementing anything for example purposes 
const mapDispatchToProps =() => ({ customAction }) 

const ConnectedContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(YourContainer)

customAction目前已成为YourContainer道具让您可以在组件中使用同样的方式等道具。

来源

2017-09-15 18:05:47 mersocarlin

的第二个参数来连接需要一个object或functioñ所以你可以了解更多关于如何用行动创造者添加

export default connect(
    (state: ApplicationState) => Object.assign({}, state.search, state.resources), 

    { 
     ResourcesState.actionCreators, 
     some_other_action_creators, 
     some_more 
    } 
)(Home) as typeof Home;

而且通读这个答案＃2

Why is there no need for a mapDispatchToProps function here?

来源

2017-09-15 18:07:42

有几种方法可以设置在React组件中分配Redux动作：

使用connect(mapState)(MyComponent)。默认情况下，您的组件将被给予props.dispatch，您可以拨打props.dispatch({type : "SOME_ACTION"})。

传递mapDispatchToProps函数作为连接的第二个参数。在里面，你可以创建新的函数引用调用dispatch：

function mapDispatchToProps(dispatch) { 
    return { 
     addTodo : (text) => dispatch({type : "ADD_TODO", text}) 
    } 
}

您还可以使用终极版bindActionCreators工具来代替：

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({addTodo, toggleTodo}, dispatch); 
}

最后，你可以传递一个对象全面的行动创造者直接的到connect：

const actions = {addTodo, toggleTodo}; 
export default connect(mapState, actions)(MyComponent);

我强烈推荐第四种方法，我在我的博客文章Idiomatic Redux: Why Use Action Creators?中也会谈到。

来源

2017-09-15 18:10:16 markerikson

连接的第二个参数需要一个对象，因此您可以使用ES6语法并避免使用mapDispatchToProps。

import { yourAction } from './your_actions_folder' 
class Home extends Component{ 
.... 
//For dispatch a action you only call the action Creator 
this.props.yourAction() 
} 
export default connect(mapStateToProps,{yourAction})(Home)

来源

2017-09-15 18:31:27

单个组件中的多个actionCreators

回答

相关问题