Login ajax request Flux React?

Question

How can I do
after login form submit (React Component)
using flux structure
ajax request that provides response ?
Can you provide some example ?

Possibly the same question as this one: http://stackoverflow.com/questions/26567401/communication-between-components — fisherwebdev, Oct 25 '14 at 23:41
Actually, i have a different problem, but this one, i think i "solved" already :) — Jim-Y, Oct 26 '14 at 16:29

score 7 · Accepted Answer · answered Oct 25 '14 at 23:44

7

Basically you need to make an Ajax request, and then create success/error handlers. Inside those handlers, you will create actions to inform your stores of the result. It's probably a good idea to have an AppStore or SessionStore or something that will hold the data related to the current user and the auth token. Your controller-views can listen to that store and render their children when the current user becomes authenticated.

answered Oct 25 '14 at 23:44

fisherwebdev

12,628
4
25
27

can you take a look https://gist.github.com/ButuzGOL/707d1605f63eef55e4af is it what you mean ? – ButuzGOL Oct 26 '14 at 06:50
5

I think you're basically on the right track, but you're painting yourself into a corner with SIGNIN_SUCCESS_EVENT. If you just keep it abstract -- just a 'change' event -- then you have a more flexible system. Trying to know which type of event is getting fired leads to tighter coupling. Example: what happens when you have an error? Now you need a new event for that, and your view needs to know what to do with each event. Keep it simple and keep the state in the store, not in the event, nor in the view. When the change event happens, your view just asks for the new state of the store(s). – fisherwebdev Oct 26 '14 at 07:46
@fisherwebdev, May I ask you to have a look at a reat related question here - http://stackoverflow.com/questions/27913004/react-js-render-a-component-from-outside-react ? – Istiaque Ahmed Jan 13 '15 at 00:46

Jim-Y · Answer 2 · 2014-10-26T17:25:51.633

Here's how i made:

When my component bootstraps, I fire an INIT action to the Store which initially gets the datas i need. Here's the simplified data flow

After login my Library component is rendered so i need to initialize the data (books, users etc..)

Library:

componentDidMount: function() {
  Store.addChangeListener(this._onChange);
  Actions.initialize();
},

As you can see, when my component did mount, i fired a new action, and my store will handle this action.

Store:

switch(action.actionType) {

    case Constants.INIT:
      _init().done(function() {
        Store.emitChange();
      });
      break;

I'm calling the private function _init() which will return a promise object. When the promise is Fulfilled the Store is ready to emit it's change event.

In _init I'm simulating some async data loads, thats why i made the promise, here it is:

function _init() {

  var loadBooksDeferred = new jQuery.Deferred(),
      loadUsersDeferred = new jQuery.Deferred(),
      loadCategoriesDeferred = new jQuery.Deferred(),
      stateReadyDfd = new jQuery.Deferred();

  _loadBooks(loadBooksDeferred);
  _loadUsers(loadUsersDeferred);
  _loadCategories(loadCategoriesDeferred);

  jQuery
    .when(loadBooksDeferred, loadUsersDeferred, loadCategoriesDeferred)
    .then(stateReadyDfd.resolve, stateReadyDfd.reject);

  return stateReadyDfd;
}

Login ajax request Flux React?

2 Answers2