Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jamesplease/redux-resource

3kb resource management for Redux
https://github.com/jamesplease/redux-resource

database redux resources

Last synced: 1 day ago
JSON representation

3kb resource management for Redux

Host: GitHub
URL: https://github.com/jamesplease/redux-resource
Owner: jamesplease
License: mit
Created: 2017-06-11T16:14:04.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2021-03-16T21:59:30.000Z (almost 4 years ago)
Last Synced: 2024-10-14T10:16:26.776Z (4 months ago)
Topics: database, redux, resources
Language: JavaScript
Homepage: https://redux-resource.js.org
Size: 2.25 MB
Stars: 237
Watchers: 7
Forks: 28
Open Issues: 12
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        












  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



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](http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html)  

✓ 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!)

### Installation

To install the latest version:

```

npm install --save redux-resource

```

### Documentation

View the documentation at

**[redux-resource.js.org ⇗](https://redux-resource.js.org/)**.

> Looking for the v2.4.1 documentation? **[View it here](https://jamesplease.github.io/redux-resource-2.4.1-docs/)**.

> Migration guides to the latest version can be found

> **[here](https://redux-resource.js.org/docs/other-guides/migration-guides.html)**.

### 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.

```js

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.

```js

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.

```js

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 ⇗](https://github.com/jamesplease/zero-boilerplate-redux)**.

This example project uses [React](https://facebook.github.io/react/), although

Redux Resource works well with any view layer.

### Repository Structure

This repository is a [Lerna](https://github.com/lerna/lerna) project. That means

it's a single repository that allows us to control the publishing of a number

of packages. The source for each package can be found in the[

  `./packages`](https://github.com/jamesplease/redux-resource/tree/master/packages)

  directory.

| Package | Version | Description |

| ---- | ---- | ---- |

| `redux-resource` | [![npm version](https://img.shields.io/npm/v/redux-resource.svg)](https://www.npmjs.com/package/redux-resource) | The main library |

| `redux-resource-xhr` | [![npm version](https://img.shields.io/npm/v/redux-resource-xhr.svg)](https://www.npmjs.com/package/redux-resource-xhr) | A library that exports a powerful HTTP CRUD action creator |

| `redux-resource-plugins` | [![npm version](https://img.shields.io/npm/v/redux-resource-plugins.svg)](https://www.npmjs.com/package/redux-resource-plugins) | A collection of common plugins |

| `redux-resource-prop-types` | [![npm version](https://img.shields.io/npm/v/redux-resource-prop-types.svg)](https://www.npmjs.com/package/redux-resource-prop-types) | Handy Prop Types to use with Redux Resource |

| `redux-resource-action-creators` | [![npm version](https://img.shields.io/npm/v/redux-resource-action-creators.svg)](https://www.npmjs.com/package/redux-resource-action-creators) | Unopinionated action creators for Redux Resource (bring your own HTTP request) |

### Contributing

Thanks for your interest in helping out! Check out the

[Contributing Guide](./CONTRIBUTING.md), which covers everything you'll need to

 get up and running.

### Contributors

([Emoji key](https://github.com/kentcdodds/all-contributors#emoji-key))

| [
_{James, please}](http://www.jmeas.com)
[💻](https://github.com/jamesplease/redux-resource/commits?author=jamesplease "Code") [🔌](#plugin-jamesplease "Plugin/utility libraries") [📖](https://github.com/jamesplease/redux-resource/commits?author=jamesplease "Documentation") [🤔](#ideas-jamesplease "Ideas, Planning, & Feedback") | [
_{Stephen Rivas JR}](http://www.stephenrivasjr.com)
[💻](https://github.com/jamesplease/redux-resource/commits?author=sprjr "Code") [📖](https://github.com/jamesplease/redux-resource/commits?author=sprjr "Documentation") [🤔](#ideas-sprjr "Ideas, Planning, & Feedback") [🔌](#plugin-sprjr "Plugin/utility libraries") | [
_{Ian Stewart}](https://github.com/ianmstew)
[🤔](#ideas-ianmstew "Ideas, Planning, & Feedback") | [
_{Tim Branyen}](http://tbranyen.com/)
[🤔](#ideas-tbranyen "Ideas, Planning, & Feedback") | [
_{Jason Laster}](https://github.com/jasonLaster)
[🤔](#ideas-jasonLaster "Ideas, Planning, & Feedback") | [
_marlonpp](https://github.com/marlonpp)
[🤔](#ideas-marlonpp "Ideas, Planning, & Feedback") | [
_{Javier Porrero}](https://github.com/JPorry)
[🤔](#ideas-JPorry "Ideas, Planning, & Feedback") |

| :---: | :---: | :---: | :---: | :---: | :---: | :---: |

| [
_{Smai Fullerton}](https://github.com/smaifullerton-wk)
[📖](https://github.com/jamesplease/redux-resource/commits?author=smaifullerton-wk "Documentation") | [
_vinodkl](https://github.com/vinodkl)
[🤔](#ideas-vinodkl "Ideas, Planning, & Feedback") | [
_{Eric Valadas}](https://github.com/ericvaladas)
[📖](https://github.com/jamesplease/redux-resource/commits?author=ericvaladas "Documentation") | [
_{Jeremy Fairbank}](http://blog.jeremyfairbank.com)
[🚇](#infra-jfairbank "Infrastructure (Hosting, Build-Tools, etc)") | [
_{Yihang Ho}](https://www.yihangho.com)
[💻](https://github.com/jamesplease/redux-resource/commits?author=yihangho "Code") | [
_{Bryce Reynolds}](https://github.com/brycereynolds)
[💡](#example-brycereynolds "Examples") | [
_{Ben Creasy}](http://bencreasy.com)
[📖](https://github.com/jamesplease/redux-resource/commits?author=jcrben "Documentation") |

| [
_{Guillaume Jasmin}](http://www.guillaume-jasmin.fr)
[💻](https://github.com/jamesplease/redux-resource/commits?author=GuillaumeJasmin "Code") [🔌](#plugin-GuillaumeJasmin "Plugin/utility libraries") |

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors)

specification. Contributions of any kind are welcome!