Geek Answers Handbook

React, Flux, React-Router Dispatch Error - Possible batchUpdates solution?

Ok, so I am stuck in a problem with reaction, flow architecture and reactive router. I have the following routes (only part of the routes):

<Route name="prepare-seniors">
  <Route name="senior" path=":candidateId" handler={SeniorCandidate}>
    <DefaultRoute handler={SeniorProfile}/>
    <Route name="senior-recommendations" path="recommends">
      <DefaultRoute handler={SeniorRecommends}/>
      <Route name="senior-rec-new" path="new"/>
    </Route>
  </Route>
</Route>

In the Senior Profile view, an API call is made to load individual data. When you go to the Featured view, a separate identifier is used to make another call to load recommendations. It works great if I first look at the profile page and go to the recommendations page. But if I do a hard reboot, I get:

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

, , , API, . , , API . , React.addons.batchUpdates - , , . GitHub Batch Updates Issue , waitFor. , :

// assuming a var `flux` containing your Flux instance...
var oldDispatch = flux.dispatcher.dispatch.bind(flux.dispatcher);
flux.dispatcher.dispatch = function(action) {
  React.addons.batchedUpdates(function() {
  oldDispatch(action);
  });
};

. , .

TodoMVC. , waitFor ... API, , . API ... , setTimeout .

, , API. API , .

, Dispatcher.js, , :

'use strict';

var flux = require('flux'),
 Dispatcher = require('flux').Dispatcher,
 React = require('react'),
 PayloadSources = require('../constants/PayloadSources'),
 assign = require('object-assign');

//var oldDispatcher = flux.Dispatcher.dispatch.bind(AppDispatcher);
//
//flux.dispatcher.dispatch = function(action) {
//  React.addons.batchedUpdates(function() {
//    oldDispatcher(action);
//  });
//};


var AppDispatcher = assign(new Dispatcher(), {
   handleServerAction: function(action) {
     var payload = {
       source: PayloadSources.SERVER_ACTION,
       action: action
     };
     this.dispatch(payload);
   },

   handleViewAction: function(action) {
     if (!action.type) {
       throw new Error('Empty action.type: you likely mistyped the action.');
     }

     var payload = {
       source: PayloadSources.VIEW_ACTION,
       action: action
     };
     this.dispatch(payload);
    }
});
module.exports = AppDispatcher;
+4
1

, , React Flux, . :

, , , , , , . , , 2 aync webservice.

, , (.. , 2- , , , , ).

, , / ( ). , React Render ( ). , Flux , , / .

, , , , , , , , React.render . , app.js:

ChatExampleData.init(); // load example data into localstorage

ChatWebAPIUtils.getAllMessages();

React.render(
    <ChatApp />,
    document.getElementById('react')
);

, , , .

, , (node example .Net- ReactJS.Net) , ( , (BTW, , ).

0

More articles:


All Articles