javascript - In a React.js app, an API calls fails in the store, how do I transmit that back to the view? -

https://cask.scotch.io/2014/10/v70csec.png

^ according flow, have make change in store, picked view.

more specifically, trying delete user, when store gets error db, want show modal saying error occurred. right way of transmitting message done through store variables , picked in view on getstatefromflux method?

userstore = { initialize: function(options) {     // other variables     this.userdeletionerror = false; }, deleteuser: function(payload) {     axios.delete(dburl)       .then((response) => {         // succeeds       })       .catch((error) => {         // other error handling         this.userdeletionerror = true;       });   } } 

if understand using ajax call in store, antipattern. right way make call in action file transmit in store.

to answer question flux-pattern should (not sure if match 100% use case).

1. view => user want delete 'user', clicks on delete button
2. view triggers action.
3. action triggers ajax call 'delete user'

4. action receives answer , transmit store (here using react dispatcher , example below:

   myajaxcall.then(function(answer) {       dispatcher.handleviewaction({         actiontype: constants.actiontypes.delete_user,         result: answer     }); }); 

5.your store catching ajax answer still through dispatcher (example below:

mystore.dispatcherindex = dispatcher.register(function(payload) {     var action = payload.action;     var result;      switch(action.actiontype) {          case constants.actiontypes.user_delete:                 registeranswer(action.result);             mystore.emitchange();                    break;     }     return true; }); 

6. you can see store trigger registeranswer(), in function can check if ajaxcall has been executed (i mean user deleted or not) , accordingly build object. here there 2 way tell view answer status 1. build dataanswer object field message example , view can check 2. emit special event. prefer first way if find more generic.

7. store emitchange , view catch event (example below:

   componentdidmount: function() {     mystore.addchangelistener(address, this._ondeleteuser; }, 

8. then view check 'message' field filled in store accordingly answer , can render whatever appropriate.

i hope it's clear. here example of store in case need it. https://facebook.github.io/flux/docs/todo-list.html#creating-stores

to resume, approach except doing ajax call in store. don't it's bad. hope helps