https://github.com/kanitsharma/react-deflux
Flux architecture implemented using react's new context API
https://github.com/kanitsharma/react-deflux
flux flux-architecture react react16
Last synced: 21 days ago
JSON representation
Flux architecture implemented using react's new context API
- Host: GitHub
- URL: https://github.com/kanitsharma/react-deflux
- Owner: kanitsharma
- Created: 2018-04-01T12:58:31.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-29T22:35:36.000Z (almost 7 years ago)
- Last Synced: 2025-02-07T13:53:20.304Z (2 months ago)
- Topics: flux, flux-architecture, react, react16
- Language: JavaScript
- Size: 271 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Deflux
Yet another flux implementation, with bindings for react.
Built over react's new context API.
## Getting Started
```javascript
npm install --save react-deflux
```
Wrap ReState over your root component.
```javascript
import Provider from 'react-deflux';
```
That's it, now any child component can connect to store.
```javascript
import { connect } from 'react-deflux';
const App = ({ buttonClick }) => (
Fire Action!
);
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 } }))
)
```