CODEWITHSUNDEEP
reactjsreact-alt
RodM
RodM

Reputation: 426

Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch

I am using ALT for my ReactJS project. I am getting the cannot 'dispatch' error if the ajax call is not yet done and I switch to another page.

Mostly, this is how my project is setup. I have action, store and component. I querying on the server on the componentDidMount lifecycle.

Action:

  import alt from '../altInstance'

  import request from 'superagent'
  import config from '../config'

  import Session from '../services/Session'

  class EventActions {
    findNear(where) {
      if (!Session.isLoggedIn()) return
      let user = Session.currentUser();

      request
        .get(config.api.baseURL + config.api.eventPath)
        .query(where)
        .set('Authorization', 'Token token=' + user.auth_token)
        .end((err, res) => {
          if (res.body.success) {
            this.dispatch(res.body.data.events)
          }
        });
    }
  }

  export default alt.createActions(EventActions)

Store

  import alt from '../altInstance'
  import EventActions from '../actions/EventActions'

  class EventStore {
    constructor() {
      this.events = {};
      this.rsvp = {};

      this.bindListeners({
        findNear: EventActions.findNear
      });
    }

    findNear(events) {
      this.events = events
    }

  }

  export default alt.createStore(EventStore, 'EventStore')

Component

  import React from 'react';

  import EventActions from '../../actions/EventActions';
  import EventStore from '../../stores/EventStore';
  import EventTable from './tables/EventTable'

  export default class EventsPage extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        loading: true,
        events: [],
        page: 1,
        per: 50
      }
    }

    componentDidMount() {
      EventStore.listen(this._onChange.bind(this));
      EventActions.findNear({page: this.state.page, per: this.state.per});
    }

    componentWillUnmount() {
      EventStore.unlisten(this._onChange);
    }

    _onChange(state) {
      if (state.events) {
        this.state.loading = false;
        this.setState(state);
      }
    }

    render() {
      if (this.state.loading) {
        return <div className="progress">
          <div className="indeterminate"></div>
        </div>
      } else {
        return <div className="row">
            <div className="col m12">
              <h3 className="section-title">Events</h3>
              <UserEventTable events={this.state.events}/>
            </div>      
        </div>
      }
    }
  }

Upvotes: 3

Views: 2204

Answers (3)

Waddles
Waddles

Reputation: 196

I believe it's because you're calling an action, and the dispatch for that action only occurs when after the request is complete.

I would suggest splitting the findNear action into three actions, findNear, findNearSuccess and findNearFail.

When the component calls findNear, it should dispatch immediately, before even submitting the reuqest so that the relevant components will be updated that a request in progress (e.g. display a loading sign if you like)

and inside the same action, it should call the other action findNearSuccess.

The 'Fetching Data' article should be particularly helpful.

Upvotes: 0

Richard Scarrott
Richard Scarrott

Reputation: 7033

I can't quite see why you'd be getting that error because the code you've provided only shows a single action.

My guess however would be that your component has been mounted as a result of some other action in your system. If so, the error would then be caused by the action being triggered in componentDidMount.

Maybe try using Alt's action.defer:

componentDidMount() {
    EventStore.listen(this._onChange.bind(this));
    EventActions.findNear.defer({page: this.state.page, per: this.state.per});
}

Upvotes: 0

Shiroo
Shiroo

Reputation: 666

componentDidMount() {
      EventStore.listen(this._onChange.bind(this));
      EventActions.findNear({page: this.state.page, per: this.state.per});
    }

This would be my will guess. You are binding onChange which will trigger setState in _onChange, and also an action will be fired from findNear (due to dispatch). So there might be a moment where both are updating at the same moment.

First of all, findNear in my opinion should be as first in componentDidMount.

And also try to seperate it in 2 differnet views (dumb and logic one, where first would display data only, while the other one would do a fetching for example). Also good idea is also to use AltContainer to actually avoid _onChange action which is pretty useless due to the fact that AltContainer has similar stuff "inside".

constructor() {
  this.events = {};
  this.rsvp = {};
  this.bindListeners({
    findNear: EventActions.findNear
  });
}

findNear(events) {
  this.events = events
}

Also I would refactor this one in

constructor() {
  this.events = {};
  this.rsvp = {};
}

onFindNear(events) {
  this.events = events
}

Alt has pretty nice stuff like auto resolvers that will look for the action name + on, so if you have action called findNear, it would search for onFindNear.

Upvotes: 1

Related Questions