# react-deflux

> React component -> npm package

Latest version **0.0.2** (published 2018-04-03) · 0 weekly downloads

## Install

```sh
npm install react-deflux
pnpm add react-deflux
yarn add react-deflux
bun add react-deflux
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2018-04-03 |
| First published | 2018-04-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kanitsharma |
| Maintainers | kanitsharma |

## Links

- npm: https://www.npmjs.com/package/react-deflux
- npm.io page: https://npm.io/package/react-deflux

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.3.0
- [webpack](https://npm.io/package/webpack.md) ^2.7.0

## Recent versions

- 0.0.2 (latest) — 2018-04-03
- 0.0.1 — 2018-04-03

## README

# React Deflux

Yet another flux implementation, with bindings for react.
Built over react's new context API.

## Getting Started

Wrap ReState over your root component.

```javascript

import ReState from 'react-deflux';

<ReState
  store={initialState} // initial state of your store
  applyMiddleWare={fetchDataMiddleWare} // Optional, Allows managing side-effects
>
  <App />
</ReState>

```

That's it, now any child component can connect to store.

```javascript

import { connect } from 'react-deflux';

const App = ({ buttonClick }) => (
  <div>
    <button onClick={buttonClick} > Fire Action! </button>
  </div>
);

const mapStateToProps = state => ({
  ...state
})

const mapDispatchToProps = (dispatch) => ({
  buttonClick: _ => dispatch({ type: 'DUMMY_ACTION'})
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

```

## Middleware

This the best part. You can pass any function (middleware) to the applyMiddleWare prop, and it will be fired with every action.

```javascript

// Handling async with middleware

export default state => action => dispatch => (
  action.type === 'FETCH_DATA' &&
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(json => dispatch({ type: 'FETCHED_DATA', payload: { apiData: json } }))
)

```

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