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.

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.

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.

// 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 } }))
)