Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Active Redux


The goal of this project is to stop bikeshedding API interactions on the frontend. We want an Active Record for Redux that works nicely with other reducers and doesn't require its own store.

This project depends on:

  • A JSON-API spec backend
  • redux and redux-thunk

Core Ideas

Resources should have models

We want to be able to interact with objects that know about their relationships with other objects, can house resource-specific information (how to read a date, how to put firstName and lastName together) and are able to persist themselves.


Models are an object that read from a JSON-API resource. They define their own attributes, know their relationships and can both read and persist information.

Here's how you use models:

1. Define the model

// models/person.js
import { Attr, define } from 'active-redux';

const Person = define('people', class Person {
  static endpoints = {    // overridable API endpoints - defaults to type
    create: 'people',
    read: 'people',
    update: 'people/:id',
    delete: 'people/:id'
  static attributes = {
    name: Attr.string({ default: 'Joe Schmoe '}),
    posts: Attr.hasMany('articles'), // The JSON-API type of the relation
    employer: Attr.hasOne('companies'),

  get firstName() {
    return' ')[0] // as well as other attributes are
  }                                // defined when the model is registered

2. Bind Active Redux to the store

// wherever the store is set
import { createStore, combineReducers } from 'redux';
import { api, bind } from 'active-redux';
import reducers from 'app/reducers';

const store = createStore(
  combineReducers({ api: api.reducer, ...reducers }),

This gives models access to the store for querying.

Use the Model

// anywhere
import Person from 'models/person';
const joe = Person.find(5)
// => Promise<Person>

The Reducers


You can find an example here. In order to set it up, you can do the following:

cd example
yarn install

# in one process
yarn server
# in another
yarn start