react-ajax.md

React and AJAX

Basic Concepts

• AJAX Requests in React: How and Where to Fetch Data
  https://daveceddia.com/ajax-requests-in-react/
  An overview of where AJAX requests fit into React usage.

• How to make AJAX requests in React?
  https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1
  A helpful introduction to making AJAX requests, including libraries to use, where to run requests, and a couple examples of handling "loading..." status.

• Understanding React: data hydration / initialization
  https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb
  Describes several possible approaches to loading data from a server at app startup, including API calls and ways to embed data into the page.

• Where to fetch Data: componentWillMount vs componentDidMount
  https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/
  A quick comparison of when these two lifecycle methods are called, and why AJAX calls should generally be done in componentDidMount

• How to fetch data in React
  https://www.robinwieruch.de/react-fetching-data/
  An excellent look at several key aspects of fetching in data in React apps, including what components should containg the fetching and display logic, what lifecycle methods to use for API calls, and how to abstract out the fetching process into its own component.

• React AJAX Best Practices
  https://www.javascriptstuff.com/react-ajax-best-practices
  Covers four ways to approach managing queries and data fetching.

• AJAX/HTTP Library Comparison
  https://www.javascriptstuff.com/ajax-libraries
  A useful overview of the most popular AJAX libraries, including platform support and feature comparisons.

• 3 Libraries and 3 Ways to handle AJAX in React Apps
  https://appendto.com/2017/01/3-libraries-and-3-ways-to-handle-ajax-in-react-apps/
  Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries.

• How to make AJAX API calls in React
  https://www.techiediaries.com/react-ajax/
  Looks at common libraries that are used for making AJAX calls in React apps, discusses which lifecycle methods to use for starting AJAX calls, and gives examples of using fetch to make AJAX calls.

Request Implementation Examples

• Implementing React Redux with GraphQL
  https://marufsarker.github.io/blog/posts/react-redux-with-graphql/ Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions.

• Rendering Backend Requests with React
  https://blog.boldlisting.com/rendering-backend-requests-with-react-7e493103c2b6
  Describes a pattern for dealing with components that depend on loading data from a backend

• Build a React + Flux App with User Authentication
  https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication
  Builds a React app that calls a remote API and authenticates users. Uses a specific auth provider and basic Flux implementation, but the concepts are widely applicable.

• Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets
  https://www.yld.io/blog/building-realtime-collaborative-offline-first-apps/ A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI.

• Handling AJAX In Your React Application with Agility
  https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70
  Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware

• You don't need a fancy framework to use GraphQL with React
  https://edgecoders.com/you-dont-need-a-fancy-framework-to-use-graphql-with-react-b47b436626fb
  A detailed explanation of how to construct GraphQL queries in a client and load the data into React components, without using any complicated libraries.

Handling Request Status with State

• React-Redux issue #210: "dispatching in componentWillMount?"
  https://github.com/reactjs/react-redux/issues/210#issuecomment-244774674
  Some valuable extended discussion about how managing requests and data really involves several distinct possible states.

• "Slaying a UI Antipattern" comparisons
  http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html
  https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a
  https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b
  https://medium.com/@marsbergen/nice-pattern-for-redux-state-b8641b6ff9d1 https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-react-64a3b98242c
  Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles.

• Better data fetching with RemoteDataJS
  https://www.jackfranklin.co.uk/blog/remote-data-js/ Examples of how to use the author's RemoteDataJS library to manage request state. Helpful to see the list of states it tracks, even if you don't use the library.

• A Better Way To Handle Loading State In Redux
  http://nikolay.rocks/2017-06-18-better-redux-loading
  Discusses several ways to store "loading/success/failure" state, and tradeoffs of the approaches. Talks about Redux, but applies to React as well.