Redux-capsule NPM

Redux Capsule

Redux middleware for encapsulation.

Motivation

ReduxCapsule allows you to write dispatch and getState in class, not in function.

This can be useful to design familiar abstraction:

import { ReduxCapsule } from 'redux-capsule';
import { increase } from './actions';

export class CounterButton extends ReduxCapsule {
  onClick = () => {
    this.dispatch(increase(1));
  };
  get label() {
    return `increment counter : ${this._currentCount}`;
  }
  get _currentCount() {
    return this.state.sampleCounter.count;
  }
}

Now that a dispatcher has become class-based, there's no need to be annoyed by the design which requires many functions to have the pairs of (dispatch, getState).

Usage on react-redux is like below:

import React from 'react';
import { connect } from 'react-redux';
import { CounterButton } from './CounterButton';

const SampleView = props => {
  const button = props.createCounterButton();
  return (
    <div>
      <button type='button' onClick={button.onClick}>
        {button.label}
      </button>
    </div>
  );
};
const mapStateToProps = state => state;

const mapDispatchToProps = {
  createCounterButton: () => CounterButton,
};
export default connect(mapStateToProps, mapDispatchToProps)(SampleView);

Installation

npm install --save redux-capsule

Then, call applyMiddleware():

import { createStore, applyMiddleware } from 'redux';
import { capsule } from 'redux-capsule';

const store = createStore(
  _ => _,// rootReducer
  applyMiddleware(capsule)
);