redux-seal middleware

counterButton.js

import { Sealer } from 'redux-seal/Sealer';
import { increase } from './actions';

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

index.js

import { Sealer } from './Sealer';

export const seal = ({ dispatch, getState }) => next => action => {
  if (action.prototype instanceof Sealer) {
    return new action({ dispatch, getState });
  }
  return next(action);
};

SamplePage.js

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

const SamplePageView = props => {
  const button = props.counterButton();
  return (
    <div className='react-sample-area'>
      <button type='button' onClick={button.onClick}>
        {button.label}
      </button>
    </div>
  );
};

const mapStateToProps = state => state;

const mapDispatchToProps = {
  counterButton,
};

export const SamplePage = connect(mapStateToProps, mapDispatchToProps)(SamplePageView);

Sealer.js

export class Sealer {
  constructor({ dispatch, getState }) {
    this.dispatch = dispatch;
    this.getState = getState;
  }
  get state() {
    return this.getState();
  }
}