Login ajax request Flux React?
Basically you need to make an Ajax request and then create success / error handlers. Within these handlers, you will create actions to inform your stores about the results. It's probably a good idea to have an AppStore or SessionStore or something that will hold data related to the current user and auth token. Your controller views can listen to this store and display their children when the current user becomes authenticated.
source to share
This is how I did:
When my component loads, I fire an INIT action on the Store, which initially receives the data I need. Here's a simplified data flow
After login, my library component is visible, 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 made a mount, I released a new action and my store will handle this action.
Store:
switch(action.actionType) {
case Constants.INIT:
_init().done(function() {
Store.emitChange();
});
break;
I am calling a private function _init()
that will return the promise object. When the promise is fulfilled, the store is ready to emit a change event.
In _init
I am simulating some loads on asynchronous data, that's why I made a 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;
}
source to share