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 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:
Installation
To install the latest version:
1
npm install --save redux-resource
Copied!
Table of Contents
- 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.
1
import { createStore, combineReducers } from 'redux';
2
import { resourceReducer } from 'redux-resource';
3
4
const reducer = combineReducers({
5
books: resourceReducer('books')
6
});
7
8
const store = createStore(reducer);
Copied!
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.
1
import { actionTypes } from 'redux-resource';
2
import store from './store';
3
4
// This action represents beginning the request to read a book with ID of 24. This
5
// could represent the start of an HTTP request, for instance.
6
store.dispatch({
7
type: actionTypes.READ_RESOURCES_PENDING,
8
resourceType: 'books',
9
resources: [24]
10
});
11
12
// Later, when the request succeeds, we dispatch the success action.
13
store.dispatch({
14
type: actionTypes.READ_RESOURCES_SUCCEEDED,
15
resourceType: 'books',
16
// The `resources` list here is usually the response from an API call
17
resources: [{
18
id: 24,
19
title: 'My Name is Red',
20
releaseYear: 1998,
21
author: 'Orhan Pamuk'
22
}]
23
});
Copied!
Later, in your view layer, you can access information about the status of this request. When it succeeds, accessing the returned book is straightforward.
1
import { getStatus } from 'redux-resource';
2
import store from './store';
3
4
const state = store.getState();
5
// The second argument to this method is a path into the state tree. This method
6
// protects you from needing to check for undefined values.
7
const readStatus = getStatus(store, 'books.meta[24].readStatus');
8
9
if (readStatus.pending) {
10
console.log('The request is in flight.');
11
}
12
13
else if (readStatus.failed) {
14
console.log('The request failed.');
15
}
16
17
else if (readStatus.succeeded) {
18
const book = state.books.resources[24];
19
20
console.log('The book was retrieved successfully, and here is the data:', book);
21
}
Copied!
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
Last modified 2yr ago