React redux 调度不可用

Question

最初我在 index.js 有这个调用来触发我的主要数据的加载：

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

现在我想进行下一步并在页面级别加载此数据（似乎更好）。

我以 Gaearon 在 Redux github 的 post 为基础：

我有这个代码：

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

Connect's react-redux docs 说明：

If you do not supply your own mapDispatchToProps function or object full of action creators, the default mapDispatchToProps implementation just injects dispatch into your component’s props.

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

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

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

中

Answer 2

天哪……我根本不需要 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)
    };
}

React redux 调度不可用

React redux dispatch not available

ecmascript-6

reactjs

redux

redux-thunk