Question

我希望将多个actionCreator分派到一个组件中。我知道你可以用状态

来做到这一点

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

但不确定如何实施。

Answer 1

有几种方法可以在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})
   }
}

您也可以使用Redux 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?中讨论。

Answer 2

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中的道具，因此您可以像使用组件中的其他道具一样使用它。

Answer 3

连接的第二个参数需要object或functio n，因此您可以添加

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

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

还可以阅读Stackoverflow上的这个答案，了解有关如何使用动作创建者的更多信息

Why is there no need for a mapDispatchToProps function here?

Answer 4

connect的第二个参数接受一个对象，因此您可以使用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)

单个组件中的多个actionCreators

4 个答案: