# mobx-dispatcher

> Add `dispatch(action)` functionality to mobx-react

Latest version **0.2.2** (published 2018-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install mobx-dispatcher
pnpm add mobx-dispatcher
yarn add mobx-dispatcher
bun add mobx-dispatcher
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2018-01-03 |
| First published | 2017-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ssen |
| Keywords | mobx, mobx-react, react-component, react, reactjs, dispatch |

## Links

- npm: https://www.npmjs.com/package/mobx-dispatcher
- Repository: https://github.com/iamssen/mobx-dispatcher
- Issues: https://github.com/iamssen/mobx-dispatcher/issues
- npm.io page: https://npm.io/package/mobx-dispatcher

## 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

- 0.2.2 (latest) — 2018-01-03
- 0.2.1 — 2018-01-03
- 0.2.0 — 2017-10-26
- 0.1.3 — 2017-08-09
- 0.1.2 — 2017-08-04
- 0.1.1 — 2017-08-04
- 0.1.0 — 2017-08-04

## README

# Status

<img src="https://travis-ci.org/iamssen/mobx-dispatcher.svg?branch=master"/>

# Installation

```
npm install mobx-dispatcher --save
```

# About
`mobx-dispatcher` is an extension to `mobx-react`.

If you use `<Provider/>` and `@inject` (https://github.com/mobxjs/mobx-react#provider-and-inject),
you can use this to isolate the Action.

# How to Use

```
// updateText.ts
export default (text: string) => ({mystore}: {mystore:SomeStore}) => {
  mystore.updateText(text);
}
```
Create an Action. The second block `{mystore}` will be injected automatically by `@dispatcher`.

```
import * as React from 'react';
import { dispatcher, Dispatch } from 'mobx-dispatcher';
import { updateText } from '../actions';

interface Props {
  dispatch?: Dispatch;
}

interface State {
}

@dispatcher
export default class extends React.Component<Props, State> {
  render() {
    return (
      <button onClick={this.dispatchText}>dispatch!!!</button>
    );
  }
  
  dispatchText = () => {
    this.props.dispatch(updateText('Hello?'));
  }
}
```
You can use `dispatch()` to execute the Action.

```
import * as React from 'react';
import { inject, observer } from 'mobx-react';
import { dispatcher, Dispatch } from 'mobx-dispatcher';
import { SomeStore } from '../stores';
import { updateText } from '../actions';

interface Props {
  mystore?: SomeStore;
  dispatch?: Dispatch;
}

interface State {
}

@inject('mystore') @dispatcher @observer
export default class Component extends React.Component<Props, State> {
  render() {
    return (
      <div>
        <p>{this.props.mystore.text}</p>
        <button onClick={this.dispatchText}>dispatch!!!</button>
      </div>
    );
  }
  
  dispatchText = () => {
    this.props.dispatch(updateText('World?'));
  }
}
```
It can also be used with `@inject`, `@observer`.

Note that `@dispatcher` must be declared before `@observer`.
(`@observer` will not work if `@dispatcher` is declared after `@observer`)

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