JSON:API (jsonapi.org) resources for React + Redux

LIST.md

Date: Feb 20th 2019

Official implementations

https://jsonapi.org/implementations/

cantierecreativo/redux-bees

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

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

redux-json-api/redux-json-api

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

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

redux-json-api/react-redux-json-api

Easy redux-json-api data handling for React

*Under development

Other implementations

jamesplease/redux-resource (redux-resource.js.org)

• ⭐️ 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

blue-chip-js/blue-chip

• ⭐️ 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 bluechip.gitbook.io/project

blue-chip-js/blue-chip-redux

This package is the official Redux adapter for BlueChip

shoutem/redux-io

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

travisbloom/redux-resources

• ⭐️ 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

https://github.com/olosegres/jsona

https://github.com/yury-dymov/json-api-normalizer

RESEARCH.md

Research for full-fledged Redux solutions

redux-json-api

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. https://github.com/redux-json-api/redux-json-api/blob/master/docs/api.md#resource-objects

• Related issue: https://github.com/HealthTree/HealthTree-ROR/issues/419

Seems to support compound documents (included): redux-json-api/redux-json-api#69

redux-bees

Method: combined reducer and middleware

Explicit endpoints: https://github.com/cantierecreativo/redux-bees#defining-your-api-endpoints

Support for compound documents (included): https://github.com/cantierecreativo/redux-bees#retrieving-compound-documents

redux-resource

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. https://redux-resource.js.org/introduction/similar-projects#redux-json-api

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: https://redux-resource.js.org/recipes/related-resources#json-api ) https://twitter.com/jmeaspls/status/1098398792766771201

SERIALIZERS.md

Thinking on how to integrate serializers with the previous options:

https://twitter.com/benoror/status/1100245459979911168

---

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() {
    this.props.dispatch(readEndpoint('health_categories'));
  }

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

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', object.id));

  return { healthCategories }
}

export default connect(mapStateToProps)(FullHealthProfileContainer);

Based on:

• https://github.com/yury-dymov/json-api-normalizer
  • https://github.com/yury-dymov/json-api-react-redux-example/blob/f35d70d48365e3ab13b2bd4624f59607f88e7342/src/redux/middleware/api.js#L20
• https://github.com/yury-dymov/redux-object
  • https://github.com/yury-dymov/json-api-react-redux-example/blob/master/src/components/Content/Content.jsx#L33