Catch&Release ORM

Catch&Release ORM is a heavily opinionated React/Redux ORM

Why an ORM?

The ORM should remove boilerplate and simplify immutable access.

Example:

Old style:

// HeroCard.jsx

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { actions } from 'heroActions';

import HeroAvatar from 'heroAvatar';
import HeroDetails from 'heroDetails';

export class HeroCard extends React.Component {
  static propTypes = {
    heroId: PropTypes.number.isRequired,
    hero: ImmutablePropTypes.Map.isRequired,
    destroyHero: PropTypes.func.isRequired
  }
  
  render() {
    const { heroId, hero, destroyHero } = this.props;
    
    return (
      <Fragment>
        <button onClick={destroyHero(heroId)}>Destroy Hero</button>
        <HeroAvatar {...{ hero }} />
        <HeroDetails {...{ hero }} />
      </Fragment>
    ); 
  }
} 

const mapStateToProps = (state, props) => ({
  hero: state.data.getIn(['entities', 'hero', props.heroId.toString()], Immutable.Map())
});

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    destroyHero: actions.destroyHero
  }, dispatch);
}

export default connect(mapsStateToProps, mapDispatchToProps)(HeroCard);

New Style:

// Hero.js
import ORM from 'crorm';
import { actions } from 'heroActions';

export class Hero extends ORM.Base({ id: null }, 'hero') {
  onDestroy(hero, dispatch) {
    dispatch(actions.destroyHero(hero.id));
  }
}

// HeroCard.jsx

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import ORM from 'crorm';

import Hero from 'hero';

import HeroAvatar from 'heroAvatar';
import HeroDetails from 'heroDetails';

export class HeroCard extends React.Component {
  static propTypes = {
    heroId: PropTypes.number.isRequired,
    hero: PropTypes.shape({
      entity: PropTypes.object
    })
  }
  
  render() {
    const { hero } = this.props;    
    
    return (
      <Fragment>
        <button onClick={hero.destroy()}>Destroy Hero</button>
        <HeroAvatar {...{ hero }} />
        <HeroDetails {...{ hero }} />
      </Fragment>
    ); 
  }
}

const mapStateToProps = (state, props) => ({
  hero: Hero.findById(props.heroId)
});

export default connect(mapStateToProps)(HeroCard);

Expectations

• Redux data is Immutable utilizing Immutable.Record
• Data is in the JSONAPI format
• Data has been parsed using jsonapi-normalizer
• Actions are all CRUD based
• Redux Store should have a { data } reducer via combinedReducers.

Setting Up

import { ORM } from 'crorm';

import { store } from 'mystore';

ORM.Config.database = store;

To Add Debug Output: ORM.Config.debug = true;

Create your Class

class Animal extends ORM.Base {};

Class Methods

database() - Get the Redux Store.

dispatch() - Get the Redux Store dispatch function.

recordType() - Get the name of your model in redux, i.e. 'hero'.

order() - Get an Immutable List of ids containing the server ordering for the current entityType.

ordered(props = {}) - Get an Immutable List of ordered instances for the current entityType.

pagination() - Get the pagination for the current entityType.

findById(id) - Get the instance matching the id for the entityType. Returns instance with empty Immutable.Map() when not found.

all() - Get and Immutable Map for all entities of entityType.

where(props = {}) - Get the instances where all props are matching.

create(props = {}) - Create an instance with the passed in props. Call an onCreate method to be overridden for server save and state update. Any additional arguments passed to create will be passed down to onCreate.

Instance Methods

Dot Access - Props can be added or edited using '.'.

valid() - Override to provide instance validation, return a boolean.

updateProps(props = {}) - Update the current values and returns a new instance with the passed in props. Calls an onUpdate to be overridden to save on the backend and update the store.

destroy() - Marks the current model as destroyed and returns a "destroyed" instance. Calls an onDestroy to be overridden to save on the backend and update the store.

onCreate(dispatch, createProps) - Override to define what happens on create.

onUpdate(dispatch, updateProps) - Override to define what happens on update.

onDestroy(dispatch) - Override to define what happens on destroy.

Pushing a New Version

• npm run build && npm publish