Skip to content

Instantly share code, notes, and snippets.

@benoror benoror/

Last active Feb 26, 2019
What would you like to do?
JSON:API ( resources for React + Redux

Date: Feb 20th 2019

Official implementations


  • ⭐️ Stars: 524
  • Forks: 45
  • Last Updated: Jul 06, 2018

A nice, short and declarative way to interact with JSON APIs


  • ⭐️ Stars: 345
  • Forks: 86
  • Last Updated: Nov 6, 2018

Redux actions, action creators and reducers to make life with JSON APIs a breeze


Easy redux-json-api data handling for React

*Under development

Other implementations

jamesplease/redux-resource (

  • ⭐️ Stars: 120
  • Forks: 28
  • Last Updated: Feb 2019

3kb resource management for Redux. Works well with APIs that adhere to standardized formats, such as JSON API


  • ⭐️ Stars: 324
  • Forks: 7
  • Last Updated: Dec 8, 2018

Normalizes GraphQL and JSON:API payloads into your state management system and provides ORM selectors to prepare data to be consumed by components


This package is the official Redux adapter for BlueChip


  • ⭐️ Stars: 103
  • Forks: 17
  • Last Updated: Jul 19, 2018


  • ⭐️ Stars: 324
  • Forks: 7
  • Last Updated: Oct 24, 2016

na, just use GraphQL . An opinionated, yet extendable, set of redux action creators and reducers that simplify creating, reading, updating, and deleting remote resources.

Misc Normalizers

Research for full-fledged Redux solutions


Method: combined reducer, actions, action creators

Assumes conventions on a complete RESTful JSON:API API:

Whenever there's referred to a resource object or entity, it must conform to JSON API specifications.

Seems to support compound documents (included):


Method: combined reducer and middleware

Explicit endpoints:

Support for compound documents (included):


Method: combined reducer(S) and action(S)

Not complete JSON:API support (ex. relationships support):

In addition, redux-json-api requires that your backend adhere to JSON API. Although Redux Resource does not provide a complete integration with JSON API out of the box, the plugin system would enable you to add more features such as relationship support.

Limited* support for compound documents (included)

one thing to note is that redux-resource/JSON:API integration isn't as robust as i'd like it to be (more info here: )

Thinking on how to integrate serializers with the previous options:

Current PoC implementation (not DRY, in every container component)

import React, { Component } from "react";
import { connect } from "react-redux";
import { readEndpoint } from 'redux-json-api';
import normalize from 'json-api-normalizer';
import build from 'redux-object';
import TilesDeckPresentational from "./TilesDeckPresentational";

class FullHealthProfileContainer extends Component {
  componentWillMount() {

  render() {
    return (
      <div id="page-content-wrapper">
        <TilesDeckPresentational tiles={this.props.healthCategories} />

const mapStateToProps = state => {
  const resource = 'health_categories';
  const endpoint = `/${resource}`;
  const response = state.api[resource] || { data: [] };
  const normalized = normalize(response, { endpoint });
  const healthCategories = (normalized.meta[endpoint].data || []).map(object => build(normalized, 'healthCategories',;

  return { healthCategories }

export default connect(mapStateToProps)(FullHealthProfileContainer);

Based on:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.