Home

A tiny but powerful system for managing 'resources': data that is persisted to remote servers.

✓ Removes nearly all boilerplate code for remotely-stored data ✓ Incrementally adoptable ✓ Encourages best practices like ✓ Works well with APIs that adhere to standardized formats, such as JSON API ✓ Works well with APIs that don't adhere to standardized formats, too ✓ Integrates well with your favorite technologies: HTTP, gRPC, normalizr, redux-observable, redux-saga, and more ✓ Microscopic file size (3kb gzipped!)

Older Documentation

This website is for the v3.0.0 version of Redux Resource. The documentation for older versions are hosted elsewhere:

Migration guides to the latest version can be found .

Installation

To install the latest version:

npm install --save redux-resource

The quick start guide is a quick overview of basic Redux Resource usage.
The introduction explains why this library exists, and also explores alternative solutions.
This section of the guides cover resource data, resource metadata, and resource lists.
Requests represent asynchronous updates to resources. Learn more about them here.
These guides cover additional topics related to using React Request.
Recipes are recommended patterns and best practices that you can use in your application.
Redux Resource provides officially maintained bits of code that make working with the library even better.
Answers to frequently asked questions.
Describes the API of all of the exports of Redux Resource.

Quick Start

Follow this guide to get a taste of what it's like to work with Redux Resource.

First, we set up our store with a "resource reducer," which is a reducer that manages the state for one type of resource. In this guide, our reducer will handle the data for our "books" resource.

import { createStore, combineReducers } from 'redux';
import { resourceReducer } from 'redux-resource';

const reducer = combineReducers({
  books: resourceReducer('books')
});

const store = createStore(reducer);

Once we have a store, we can start dispatching actions to it. In this example, we initiate a request to read a book with an ID of 24, then follow it up with an action representing success. There are two actions, because requests usually occur over a network, and therefore take time to complete.

import { actionTypes } from 'redux-resource';
import store from './store';

// This action represents beginning the request to read a book with ID of 24. This
// could represent the start of an HTTP request, for instance.
store.dispatch({
  type: actionTypes.READ_RESOURCES_PENDING,
  resourceType: 'books',
  resources: [24]
});

// Later, when the request succeeds, we dispatch the success action.
store.dispatch({
  type: actionTypes.READ_RESOURCES_SUCCEEDED,
  resourceType: 'books',
  // The `resources` list here is usually the response from an API call
  resources: [{
    id: 24,
    title: 'My Name is Red',
    releaseYear: 1998,
    author: 'Orhan Pamuk'
  }]
});

Later, in your view layer, you can access information about the status of this request. When it succeeds, accessing the returned book is straightforward.

import { getStatus } from 'redux-resource';
import store from './store';

const state = store.getState();
// The second argument to this method is a path into the state tree. This method
// protects you from needing to check for undefined values.
const readStatus = getStatus(store, 'books.meta[24].readStatus');

if (readStatus.pending) {
  console.log('The request is in flight.');
}

else if (readStatus.failed) {
  console.log('The request failed.');
}

else if (readStatus.succeeded) {
  const book = state.books.resources[24];

  console.log('The book was retrieved successfully, and here is the data:', book);
}