Search code examples
javascriptviewreactjsstoreflux

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 to this flow, I have to make a change in the store, which is then picked up by the view.

More specifically, I am trying to delete a user, but when the store gets an error from the DB, I want to show a modal saying the error occurred. Would the right way of transmitting the message be done through the store variables and then picked up in the view on the 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;
      });
  }
}
Solution

  • If I understand well you are using an ajax call in a store, this is an antipattern. The right way to do is make the call in the action file then transmit it in the store.

    To answer your question the flux-pattern should look like that (not sure if it match 100% your use case).

    1. View => User want to delete a 'user', he clicks on the delete button
    2. View triggers an action.
    3. Action triggers an ajax call 'delete this user'

    4. Action receives the answer and transmit it to the store (here you are using the react dispatcher , example below:

      MyAjaxCall.then(function(answer) {  
    Dispatcher.handleViewAction({
        actionType: Constants.ActionTypes.DELETE_USER,
        result: answer
    });
});

    5.Your store is catching the ajax answer still through the 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;
});

    1. You can see that your store will trigger registerAnswer(), in this function you can check if the ajaxcall has been executed (I mean is the user deleted or not) and accordingly build the object. Here there is two way to tell your view about the answer status 1. you build an dataAnswer object with a field message for example and then your view can check it 2. you emit a special event. I prefer the first way if find it more generic.

    2. Store emitChange and your view catch the event (example below:

      componentDidMount: function() {
    MyStore.addChangeListener(address, this._onDeleteUser;
},

    3. Then your view check the 'message' field you filled in the store accordingly to the answer and you can render whatever is appropriate.

    I hope it's clear. Here is an example of store in case you need it. https://facebook.github.io/flux/docs/todo-list.html#creating-stores

    To resume, your approach is good except doing the ajax call in the store. Don't do that it's really bad. Hope it helps