Fresh Data for React/Redux

Fresh Data is a declarative data API framework for JavaScript apps.

Caveat

Fresh Data is new. Very new. As such it should not be used in production just yet! This code will be changing still.

Try it out on something noncritical and provide some feedback!

Installation

npm install --save @fresh-data/react-redux

Note: This module has a peer dependency on @fresh-data/framework and must be used in conjunction with it.

How it works

This module is designed to be used with @fresh-data/framework and your own API Specification. It takes the API Spec and makes it available to your React application components in an easy and declarative manner.

Application Component

Here's how you define the API data you need for a React Component.

function mapSelectorsToProps( selectors, ownProps, state ) {
	const { getThing } = selectors;
	const { thingId } = ownProps;

	const thing = getThing( { freshness: 90 * SECOND }, thingId );

	return {
		thing,
	};
}

export default withApiClient( { mapSelectorsToProps } )( MyReactComponent );

The withApiClient Higher Order Component works much like connect from React Redux. The above code will handle the initial fetching of your data and will re-fetch every time the freshness time is exceeded.

Your own API depends on the operations, methods, and selectors you define.

• Operations: The operations you can perform on your data (e.g. read, update, create, delete )
• Mutations: Functions you provide to application developers can call to perform operations on your data.
• Selectors: Functions you provide to application developers to access data in their preferred format.

Integrating Fresh Data APIs into your React application

The Fresh Data ApiProvider holds a created API Spec available to your application and provides it to your connected data components:

import apiSpec from 'my-api-spec';

export default MyApp = () => {
	return (
		<ReduxProvider store={ store }>
			<FreshDataProvider apiSpec={ apiSpec }>
				<div classname="App">
					<DataForm myApiUri="https://example.com" />
				</div>
			</FreshDataProvider>
		</ReduxProvider>
	);
};