Where should ajax request be made in Flux app?

by

I’m a big proponent of putting async write operations in the action creators and async read operations in the store. The goal is to keep the store state modification code in fully synchronous action handlers; this makes them simple to reason about and simple to unit test. In order to prevent multiple simultaneous requests to the same endpoint (for example, double-reading), I’ll move the actual request processing into a separate module that uses promises to prevent the multiple requests; for example:

class MyResourceDAO {
  get(id) {
    if (!this.promises[id]) {
      this.promises[id] = new Promise((resolve, reject) => {
        // ajax handling here...
      });
    } 
    return this.promises[id];
  }
}

While reads in the store involve asynchronous functions, there is an important caveat that the stores don’t update themselves in the async handlers, but instead fire an action and only fire an action when the response arrives. Handlers for this action end up doing the actual state modification.

For example, a component might do:

getInitialState() {
  return { data: myStore.getSomeData(this.props.id) };
}

The store would have a method implemented, perhaps, something like this:

class Store {
  getSomeData(id) {
    if (!this.cache[id]) {
      MyResurceDAO.get(id).then(this.updateFromServer);
      this.cache[id] = LOADING_TOKEN;
      // LOADING_TOKEN is a unique value of some kind
      // that the component can use to know that the
      // value is not yet available.
    }

    return this.cache[id];
  }

  updateFromServer(response) {
    fluxDispatcher.dispatch({
      type: "DATA_FROM_SERVER",
      payload: {id: response.id, data: response}
    });
  }

  // this handles the "DATA_FROM_SERVER" action
  handleDataFromServer(action) {
    this.cache[action.payload.id] = action.payload.data;
    this.emit("change"); // or whatever you do to re-render your app
  }
}

More Related Contents:

  1. Why use Redux over Facebook Flux? [closed]
  2. How to download fetch response in react as file
  3. At what nesting level should components read entities from Stores in Flux?
  4. How to avoid bind or inline arrow functions inside render method
  5. Make React useEffect hook not run on initial render
  6. React ‘cannot read property of undefined’ when using map
  7. Rendering raw html with reactjs
  8. How to pass data from a page to another page using react router
  9. Correct way to handle conditional styling in React
  10. Is it possible to share states between components using the useState() hook in React?
  11. Why is immutability so important (or needed) in JavaScript?
  12. Multiple path names for a same component in React Router
  13. How do you send images to node js with Axios?
  14. react.js Replace img src onerror
  15. React | How to detect Page Refresh (F5)
  16. Recommended way of making React component/div draggable
  17. React: trigger onChange if input value is changing by state?
  18. Is store.dispatch in Redux synchronous or asynchronous
  19. First Load JS shared by all is rather heavy in next.js
  20. Why is React not rendering my component state correctly?
  21. I can’t reference an image in Next.js
  22. Is there a way to render multiple React components in the React.render() function?
  23. How to create a protected route with react-router-dom?
  24. “You may need an additional loader to handle the result of these loaders.”
  25. Do we still need functional setState way in react hooks?
  26. React 18 strict mode causing component to render twice [duplicate]
  27. Reactjs-setState previous state is the first argument, props as the second argument
  28. TypeError dispatcher.useState is not a function when using React Hooks
  29. How to Access styles from React?
  30. Is it possible to pass context into a component instantiated with ReactDOM.render?

Leave a Comment