Pattern for hosting multiple versions of a component tree inside the main state tree

Installation

Install with npm or yarn:

npm install --save redux-rubberstamp

Usage

Using redux-rubberstamp in your application is easy:

If you only need one instance of the component in your state tree, you can export it as a singleton component:

import { Singleton } from 'redux-rubberstamp'
import reducer from './reducer'
import button from './button'
import * as actions from './actions'
import * as selectors from './selectors'

export default Singleton({
  namespace: 'button',
  component: button,
  reducer,
  actions,
  selectors
})

If you only need multiple instances of the component in your state tree, you can export it as a factory component:

import { Factory } from 'redux-rubberstamp'
import reducer from './reducer'
import button from './button'
import * as actions from './actions'
import * as selectors from './selectors'

export default Factory({
  namespace: 'button',
  component: button,
  reducer,
  actions,
  selectors
})

When you use the component in your react app, you treat it like any default export:

import Button from './components/button'

const () => {
  return <Button />
}

In order to manage the master state tree, redux-rubberstamp provides a custom combineReducers function to manage the components place in the state tree:

import { combineReducers } from 'redux-rubberstamp'
import Button from './button'

export default combineReducers([
  Button
])