Home

Travis build status npm version npm downloads Test Coverage gzip size

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 normalized state βœ“ 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 here.

Installation

To install the latest version:

npm install --save redux-resource

Table of Contents

  • Quick Start

    The quick start guide is a quick overview of basic Redux Resource usage.

  • Introduction

    The introduction explains why this library exists, and also explores alternative solutions.

  • Resources

    This section of the guides cover resource data, resource metadata, and resource lists.

  • Requests

    Requests represent asynchronous updates to resources. Learn more about them here.

  • Other Guides

    These guides cover additional topics related to using React Request.

  • Recipes

    Recipes are recommended patterns and best practices that you can use in your application.

  • Ecosystem Extras

    Redux Resource provides officially maintained bits of code that make working with the library even better.

  • FAQ

    Answers to frequently asked questions.

  • API Reference

    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);
}

This is just a small sample of what it's like working with Redux Resource.

For a real-life webapp example that uses many more CRUD operations, check out the zero-boilerplate-redux webapp β‡—. This example project uses React, although Redux Resource works well with any view layer.

Contributors

(Emoji key)

This project follows the all-contributors specification. Contributions of any kind are welcome!

Last updated