Unofficial React bindings for Redux

react, reactjs, hot, reload, hmr, live, edit, flux, redux, blackbox
npm install react-redux-blackbox@0.0.4


React Redux Blackbox

Unofficial React bindings for Redux.
A more functional approach, but not to be used without a thorough understanding of the official bindings, react-redux.

Build Status

Additional Resources

Functionally sexier unofficial react redux bindings: The Medium Article
TJs frontend-boilerplate with blackbox


React Redux requires React 0.14 or later.

npm install --save react-redux-blackbox

The secret sauce

Providers are the only component connected to the store. All connect mapStateToProps functions are sent to the Provider, and the resulting props are passed down through a blackbox object.

New connect implimentation

import { filterConnect } from 'react-redux-blackbox'

const Wrapped = filterConnect(
    (state, props)=>{...},
    (dispatch, props)=>{...},
    (stateProps, dispatchProps, ownProps)=>{...},


const Wrapped = filterConnect(
    [(state, resultProps)=>{...}, props=>resultProps],
    [(dispatch, resultProps)=>{...}, props=>resultProps],
    (stateProps, dispatchProps, ownProps)=>{...}, 

I've added the extra props change check because with blackbox, mapStateToProps functions that rely on props will do a double calculation everytime the resultProps change. This way we avoid double calculations when the resultProps are shallow equal.

import { Provider } from 'react-redux-blackbox'

function ProviderContent(props){
    <Wrapped blackbox={props.blackbox} />

<Provider store={store}>
    <ProviderContent />

Provider passes its only child the blackbox object through props, and from their you pass the blackbox to all the filterConnect components