React Redux分派不可用

Question

Originally I had this call at index.js to trigger the load of my main data:

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

Now I want to do the next step and load this data at page level (seems better).

---

I'm basing myself on this post by Gaearon at the Redux github :

---

I have this code:

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

---

The issue

When I uncomment the line, I get this error:

TypeError: dispatch is not a function

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

The (most important) difference that I see is that I do mapping:

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

What do I need to do to get this to work?

Likely something easy, but I don't see it.

Answer 1

Connect's react-redux docs explain that:

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.

When you don't pass mapDispatchToProps params to connect , react-redux passes dispatch as a prop to the wrapped component.

If you pass mapDispatchToProps to connect , the wrapped actions are passed instead of dispatch , and this.props.dispatch is undefined.

So if you need dispatch in your compon, refrain from using mapDispatchToProps , or wrap all your actions with dispatch inside mapDispatchToProps .

Answer 2

Oh boy ... I didn't need Gaearon's script at all. All I had to do is call the actions list from the constructor:

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

        props.actions.doStuff();

        this.state = {
            myStuff: []
        }
    }

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

Where this is the important line:

props.actions.doStuff();

Which is available because it's mapped in mapDispatchToProps :

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