redux-model-tools

Model utils for Redux

Usage no npm install needed!

<script type="module">
  import reduxModelTools from 'https://cdn.skypack.dev/redux-model-tools';
</script>

README

redux-model-tools

Helpers for Redux to reduce its boilerplate.

Sponsored by Evil Martians

Using

Create namespaced constants:

// model.js
import { createConstants } from 'redux-model-tools';


const constants = createConstants('POST', [
  'EDIT',
  'REMOVE',
  'PUBLISH',
]);

console.log(constants.EDIT); // 'POST/EDIT'

And use them to create the corresponding actions. An action creator will be created for each constant automatically:

// actions.js
import { createActions } from 'redux-model-tools';
import { constants }     from './model';
import store             from './store';


const actions = createActions(constants, {
  asyncPublish() {
    return (dispatch) => { // using redux-thunk
      // every action created from a constant is assigned to `this`
      dispatch(this.publish());
    };
  }
})


// actions.edit(42)     -> { type: 'POST/EDIT', payload: 42 }
// actions.remove(42)   -> { type: 'POST/REMOVE', payload: 42 }
// actions.asyncPublish -> dispatch => {}

Make a getter for your state

Suppose you have a state like this:

{
  yourReducer: {
    foo: 'foo',
    bar: 'bar'
  }
}

Then you can make a getter in your model like so:

import { makeGetter } from 'redux-model-tools';

const get = makeGetter('yourReducer');

And use it in containers like so:

import { get } from './model';

function mapStateToProps(state) {
  return get(state, ['foo', 'bar']); // { foo: 'foo', bar: 'bar' }
}