Redux-boilerplate NPM

redux-boilerplate

Boilerplate generator for Redux

Install

$ npm install --save redux-boilerplate

Target audience

This package is aimed at projects using:

redux
react
react-redux: Redux bindings for React

Examples are in ES6/7. If you are building React applications, you are highly recommended to use Babel for transpiling ES6/7 to ES5, mostly via tools like Webpack or Browserify.

API

Usage

Generating Action Creators

Redux recommends generating Action objects through a function (action creator).

Before

In action generators file, you may export some functions like this:

// file: ./actions/todos.js
const ADD_TODO = 'ADD_TODO';

export function addTodo(text) {
  return {
  	type: ADD_TODO,
  	text
  };
}

After

The code above can be written like this instead using redux-boilerplate:

// file: ./actions/todos.js
import { makeActionCreator } from 'redux-boilerplate';

const ADD_TODO = 'ADD_TODO';

export const addTodo = makeActionCreator(ADD_TODO, 'text');

Generating `mapDispatchToProps()`

When you have smart React components (often called container components), you are expected to pass mapStateToProps and occassionally mapDispatchToProps functions to react-redux's connect().

Before

// file: ./containers/Todos.js
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { addTodo } from '../actions/todos';

class Todos extends Component {
  render() {
    return (
      <a onClick={this.props.addTodo('blah')}>
        Add Todo
      </a>
    );
  }
}

function mapStateToProps(state) {
	return {};
}

function mapDispatchToProps(dispatch) {
  return {
    addTodo: function (text) {
      return dispatch(addTodo(text));
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

After

The above code for mapDispatchToProps can be written in a much shorter form as:

// file: ./containers/Todos.js
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { makeDispatchMapper } from 'redux-boilerplate';

import { addTodo } from '../actions/todos';

class Todos extends Component {
	// ...
}

function mapStateToProps() {
  return {};
}

const mapDispatchToProps = makeDispatchMapper({
	addTodo
});

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

If you are using ES7 decorators, you could write it in a more readable form too:

// file: ./containers/Todos.js
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { makeDispatchMapper } from 'redux-boilerplate';

import { addTodo } from '../actions/todos';

function mapStateToProps(state) {
  return {};
}

const mapDispatchToProps = makeDispatchMapper({
	addTodo
});

@connect(mapStateToProps, mapDispatchToProps)
export default class Todos extends Component {
	// ...
}