Andrew Farmer shares with us four good ways to use AJAX with React:
When you start asking about AJAX and React, the first thing the experts will tell you is that React is a view library and React has no networking/AJAX features.
It's good to know, but not very helpful when you just want to get data from the server into your React components...
Redux was inspired, in part, by elm. In this post, Stefan Oestreicher discusses an experimental "Elm Architecture" approach to his app data. It's a neat walkthrough if you want to think through how to build your own central-state system.
In React, we use "Container" components to fetch data. Often Containers will:
- Request data
- Show a loading screen
- Pass the data to the UI component.
- If there is an error, show it to the user.
- Cleanup resources
React Komposer is a way to simplify this repetition. You specify how to fetch the data and it takes care of the rest.
redux-saga is an alternative "side effects middleware" for Redux applications. The idea is that you create Sagas to gather all your side effects logic in a central place.
This means the logic of the application lives in 2 places:
- Reducers are responsible for handling state transitions between actions
- Sagas are responsible for orchestrating complex/asynchronous operations
The term "sagas" comes from a 1987 paper by Garcia-Molina and Salem, which you can read here. The idea here is that it makes it easier to manage complex, async workflows.
There is thorough documentation and you can read more in depth about it in the article Master Complex Redux Workflows with Sagas.
react-cursor is, essentially, a data structure that holds holds your state. It's not-unlike the central state that you might have with redux. It's also similar, in idea, to using immutable data structures like ImmutableJS. One reason you might use a cursor instead of immutablejs is that it uses regular js data structures / values. So you're not converting back and forth between custom data structures.
Checkout the 'hello world' jsfiddle here
How do you usually request data and store it to redux state? This package helps you request async data, store your data your redux state and connect that data to a component.
There are two other libraries that help deal with loading async data per-component, but these libraries aren't so tightly integrated with redux:
Also see "redial" below
trux is a data framework for managing mutable data in your React app.
API ⇆ Trux ➝ Components
The idea is that trux stores are a thin interface between your server data and the client-side of your app.
If you've already got an app going using Flux or Redux and you're happy with how it works, Trux may not be for you, but if you're looking for a simple way to get unidirectional data flows persisting throughout your app, Trux might be just what you need.
Redial is a way to fetch data based on routes. You can specify custom lifecycle hooks, configure optional data, dispatch events on page-load etc.
redux-react-local is a decorator that allows reducer code to be defined locally with components. The pro is that you're able to define component-local data (that's still kept in your redux store). The con is that you're spreading your reducers across your code. Nonetheless, this is an interesting way to split co-locate reducers when they only apply to one component.