React redux 调度不可用

Question

最初我在index.js 打了这个电话来触发我的主要数据的加载：

const store = configureStore();
store.dispatch(doStuff());

现在我想做下一步并在页面级别加载这些数据（似乎更好）。

---

我以 Gaearon 在Redux github 的这篇帖子为基础：

---

我有这个代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { PropTypes } from 'prop-types';
import { bindActionCreators } from 'redux';
import * as myActions from '../../actions/myActions';
import { MuiThemeProvider } from 'material-ui/styles';

let createHandlers = function(dispatch) {
    let doStuff = function() {
      dispatch(myActions.doStuff())
    };

    return {
        doStuff,
      // other handlers
    };
  }


class MyPage extends Component {
    constructor(props, context) {
        super(props, context);

        this.handlers = createHandlers(this.props.dispatch);
        //this.handlers.doStuff();

        this.state = {
            myStuff: []
        }
    }

    render() {
        return (
            <MuiThemeProvider>
                <div>...</div>
            </MuiThemeProvider>
        );
    }
}

function mapStateToProps(state, ownProps) {
    return {
        // Set state
    };
}

function mapDispatchToProps(dispatch) {
    return {
        // Set state
    };
}

MyPage.propTypes = {
        // My props
}

export default connect(mapStateToProps, mapDispatchToProps)(MyPage);

---

问题

当我取消注释该行时，我收到此错误：

TypeError: dispatch is not a function

let doStuff = function() {  
   dispatch(myActions.doStuff()) 
};

我看到的（最重要的）区别是我做映射：

export default connect(mapStateToProps, mapDispatchToProps)(MyPage);

我需要做什么才能让它工作？

可能很简单，但我没看到。

Answer 1

天啊……我根本不需要 Gaearon 的剧本。我所要做的就是从构造函数中调用动作列表：

class MyPage extends Component {
    constructor(props, context) {
        super(props, context);

        props.actions.doStuff();

        this.state = {
            myStuff: []
        }
    }

    render() {
        return (
            <MuiThemeProvider>
                <div>...</div>
            </MuiThemeProvider>
        );
    }
}

这是重要的一行：

props.actions.doStuff();

这是可用的，因为它映射到mapDispatchToProps：

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(loadOrderActions, dispatch)
    };
}

Answer 2

Connect's react-redux docs 解释一下：

如果您不提供自己的 mapDispatchToProps 函数或对象 充满动作创建者，默认的 mapDispatchToProps 实现 只需将 dispatch 注入组件的 props 即可。

当您不将 mapDispatchToProps 参数传递给 connect 时，react-redux 会将 dispatch 作为 prop 传递给被包装的组件。

如果您将mapDispatchToProps 传递给connect，则会传递包装的操作而不是dispatch，并且this.props.dispatch 是未定义的。

因此，如果您的组件中需要dispatch，请避免使用mapDispatchToProps，或者将您的所有操作都用dispatch 封装在mapDispatchToProps 中。