Repository files navigation

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

✓ Removes nearly all boilerplate code for remotely-stored data
✓ Incrementally adoptable
✓ Encourages best practices likenormalized 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!)

To install the latest version:

npm install --save redux-resource

View the documentation atredux-resource.js.org ⇗.

Looking for the v2.4.1 documentation?View it here.

Migration guides to the latest version can be foundhere.

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

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

import{createStore,combineReducers}from'redux';import{resourceReducer}from'redux-resource';constreducer=combineReducers({books:resourceReducer('books')});conststore=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 anaction representing success. There are two actions, because requests usuallyoccur over a network, and therefore take time to complete.

import{actionTypes}from'redux-resource';importstorefrom'./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 ofthis request. When it succeeds, accessing the returned book is straightforward.

import{getStatus}from'redux-resource';importstorefrom'./store';conststate=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.constreadStatus=getStatus(store,'books.meta[24].readStatus');if(readStatus.pending){console.log('The request is in flight.');}elseif(readStatus.failed){console.log('The request failed.');}elseif(readStatus.succeeded){constbook=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 outthezero-boilerplate-redux webapp ⇗.This example project usesReact, althoughRedux Resource works well with any view layer.

This repository is aLerna project. That meansit's a single repository that allows us to control the publishing of a numberof packages. The source for each package can be found in the./packagesdirectory.

Package	Version	Description
redux-resource		The main library
redux-resource-xhr		A library that exports a powerful HTTP CRUD action creator
redux-resource-plugins		A collection of common plugins
redux-resource-prop-types		Handy Prop Types to use with Redux Resource
redux-resource-action-creators		Unopinionated action creators for Redux Resource (bring your own HTTP request)

Thanks for your interest in helping out! Check out theContributing Guide, which covers everything you'll need toget up and running.

(Emoji key)

James, please 💻🔌📖🤔	Stephen Rivas JR 💻📖🤔🔌	Ian Stewart 🤔	Tim Branyen 🤔	Jason Laster 🤔	marlonpp 🤔	Javier Porrero 🤔
Smai Fullerton 📖	vinodkl 🤔	Eric Valadas 📖	Jeremy Fairbank 🚇	Yihang Ho 💻	Bryce Reynolds 💡	Ben Creasy 📖
Guillaume Jasmin 💻🔌

This project follows theall-contributorsspecification. Contributions of any kind are welcome!