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.

Additional Resources

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

Installation

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)=>{...},
    options
)(Container)

or

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

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>

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