The main target of the library are front-end applications, but it could be used also in Node.js.
It helps you providing async data to your components informing them about loading and error states. It also provides a cache layer, so you don´t have to worry about when to read the data, and allows you to combine the results of different data providers using a syntax very similar to the known Reselect, recalculating them only when one of the dependencies cache is cleaned.
As its states are managed with Redux, you can take advantage of its large ecosystem of addons, which will improve the developer experience. (You don't need to use Redux directly in your application if you don't want, the library includes its own internal store for that purpose, which can be migrated to your own store for debugging purposes, for example).
Data Provider is agnostic about data origins, so it can be used to read data from a REST API, from
localStorage, or from any other origin. Choose one of the available addons depending of the type of the origin you want to read from, as @data-provider/axios, or @data-provider/browser-storage.
It has a light weight, 5.5KB gzipped in UMD format (you have to add the Redux weight to this), and addons usually are even lighter.
As a summary, what Data Provider gives to you is:
- Loading, error and data states
- Event emitter
And, the most important thing... it promotes separation of concerns, isolating the data layer, and separating your data cache from your global state.
Data Provider is available as a package in the NPM registry:
It is also available as a precompiled UMD package that defines a
window.dataProvider global variable. The UMD package can be used as a
<script> tag directly, you only have to remember to first load Redux with another
Read the installation page for further info.
Define two basic providers and combine them using a simple Selector. We will use the @data-provider/axios origin to illustrate this example, but the syntax is applicable to all types of origins.
Now we have defined the providers and the selector, we can illustrate how the cache works:
Take advantage of the @data-provider/react addon, and use hooks to retrieve the data automatically from a React component:
NOTE: This is a very basic example of what @data-provider/react can do. Check the @data-provider/react docs for further info.
Previous examples don't show the real power of Data Provider, and how it could be used to isolate completely your components from the data layer, where a great part of the business rules should reside.
In next chapters we will try to show you how the cache of a "collection" can be cleaned automatically when a "model" is updated, how to use selectors dependencies to completely manage all your data using them, how defining "queries" for the origins (as url parameters or query strings) can be delegated completely to the selectors, etc.
But first, you should read the "motivation" page to really understand why this library exists, what problems it can solve, or, at least, what bad patterns it can help to prevent.