The last time Hackerfall tried to access this page, it returned a not found error. A cached version of the page is below, or click here to continue anyway

GitHub - procore/redux-modules: A library for defining clear, predictable state transformations.


redux-modules is a refinement on the Redux module concept with developer experience in mind. It provides:

Getting Started


npm install redux-modules --save

Usage Example

Here's an example of a simple todo app. First create a module that allows todos to be created and destroyed.


import { createModule } from 'redux-modules';
import { propCheck } from 'redux-modules-middleware';
import { fromJS, List } from 'immutable';

import { shape, string, number } from 'prop-types';

export default createModule({
  name: 'todos',
  initialState: List(),
  selector: state => ({ todos: state.get('todos') }),
  transformations: {
    create: {
      middleware: [
          shape({ description: string.isRequired })
      reducer: (state, { payload }) =>
        state.update('collection', todos => todos.push(fromJS(payload))),
    destroy: {
      middleware: [
      reducer: (state, { payload }) =>
        state.update('collection', todos => todos.delete(payload)),

Once the module is complete, the reducer has to be added to the store.


const store = createStore(todoModule.reducer, {});

export default const App = props => (
  <Provider store={store}>
    <Todos {...props}/>

Alternatively, use ModuleProvider to allow reducers to be automatically added to the store at runtime.

import { ModuleProvider } from 'redux-modules';
const store = createStore(state => state, {});

export default const App = props => (
  <ModuleProvider store={store}>
    <Todos {...props}/>

The last step is to connect the module to the view. This works like a normal Redux connect with the added bonus of auto dispatching and namespacing actions.


import { connectModule } from 'redux-modules';
import { Component, PropTypes } from 'react';
import { array, func, shape } from 'prop-types';

export default class Todos extends Component {
  static propTypes = {
    todos: array,
    actions: shape({
      create: func,
      destroy: func,

That's it! Check the documentation for comparisons with idiomatic Redux, in depth examples, and advanced usage.


Continue reading on