this.props.dispatch().then is not a function

Question

I am trying to do something as soon as a dispatch action finishes, and a similar question led me to try to use .then . I get an error that it doesn't exist, this.props.dispatch().then is not a function :

export function unpackStore(redux_store, namespace) {
    // namespace is determined by what name you gave each reducer in combineReducers; client/reducers/index.js
    let final_props = {};
    let KEYS = Object.keys(redux_store[namespace]);
    for (let key of KEYS) {
        final_props[key] = redux_store[namespace][key];
    }
    return final_props;
}

export function basicUnpackStoreClosure(namespace) {
    return function(store) {
        let props = unpackStore(store, namespace);
        return props;
    }
}



@connect(basicUnpackStoreClosure('login_info'))
export default class LoginPage extends MyComponent {

    constructor(props) {
        let custom_methods = [
            'handleLoginOrRegisterToggle',
            'handleOnKeyDownInInputs',
            'onLoginSubmit',
            'onRegisterSubmit',
        ]
        super(props, custom_methods);
        this.state = {
            mode: 'login',
            email: '',
            password: '',
            password_confirm: ''
        };
        if (props.mode == 'register') {
            this.state.mode = 'register';
        }

    }

    onLoginSubmit() {

        let self = this;

        let reroute = function() {
            browserHistory.push(self.props.destination_url);
        }

        this.props.dispatch({type: 'LOG_IN', payload: "fake@fake.com"})
          .then((response) => {
              browserHistory.push(self.props.destination_url);
          })
    }

We also tried the way you do something when this.setState finishes, passing it as a second arg:

this.props.dispatch({type: 'LOG_IN', payload: "fake@fake.com"}, reroute)

neither worked. The this.props.dispatch seems to come for free with using the @connect decorator. How can I run something only after this Redux store is updated with the "LOG_IN" action?

Answer 1

Normally the connect HOC is used to bind the actions with a component. For an example,

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

After you do this, then this.props.getApplications will be bound where getApplications is the action you need to fire.

As per your comment, if you want to have access to this.props.dispatch INSTEAD of binding actions, simply call connect() without passing any mappers, and the default behavior will inject dispatch.

Answer 2

You may install 'redux-promise' middleware and include it in your store. The problem here is that the promise is not getting fulfilled. Including 'redux-promise' middleware will solve the problem