# redux-capsule

> Redux middleware for encapsulation

Latest version **1.0.7** (published 2017-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-capsule
pnpm add redux-capsule
yarn add redux-capsule
bun add redux-capsule
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2017-12-20 |
| First published | 2017-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | x7c1 |
| Maintainers | x7c1 |
| Keywords | dispatch, getState, react, redux, thunk |

## Links

- npm: https://www.npmjs.com/package/redux-capsule
- Repository: https://github.com/x7c1/redux-capsule
- Homepage: https://github.com/x7c1/redux-capsule#readme
- Issues: https://github.com/x7c1/redux-capsule/issues
- npm.io page: https://npm.io/package/redux-capsule

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2017-12-20
- 1.0.6 — 2017-12-16
- 1.0.5 — 2017-12-15
- 1.0.4 — 2017-12-15
- 1.0.3 — 2017-12-15
- 1.0.2 — 2017-12-12
- 1.0.1 — 2017-12-12
- 1.0.0 — 2017-12-12

## README

# Redux Capsule

[![build status](https://img.shields.io/travis/x7c1/redux-capsule/master.svg?style=flat-square)](https://travis-ci.org/x7c1/redux-capsule) 
[![npm](https://img.shields.io/npm/v/redux-capsule.svg?style=flat-square)](https://www.npmjs.com/package/redux-capsule)

<!--
[![npm downloads](https://img.shields.io/npm/dm/redux-capsule.svg?style=flat-square)](https://www.npmjs.com/package/redux-capsule)
-->

Redux [middleware](https://redux.js.org/docs/advanced/Middleware.html) for encapsulation.

## Motivation

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

This can be useful to design familiar abstraction:

```js
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:

```js
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()](https://redux.js.org/docs/api/applyMiddleware.html):

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

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

## License

This repository is published under the MIT License.

---
_Source: https://npm.io/package/redux-capsule · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._