# react-redux-blackbox

> Unofficial React bindings for Redux

Latest version **0.0.4** (published 2016-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-redux-blackbox
pnpm add react-redux-blackbox
yarn add react-redux-blackbox
bun add react-redux-blackbox
```

## 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.4 |
| Published | 2016-09-14 |
| First published | 2016-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dan Abramov |
| Maintainers | l2silver |
| Keywords | react, reactjs, hot, reload, hmr, live, edit, flux, redux, blackbox |

## Links

- npm: https://www.npmjs.com/package/react-redux-blackbox
- Repository: https://github.com/l2silver/react-redux-blackbox
- Homepage: https://github.com/gaearon/react-redux-blackbox
- Issues: https://github.com/l2silver/react-redux-blackbox/issues
- npm.io page: https://npm.io/package/react-redux-blackbox

## Dependencies (4)

- [lodash](https://npm.io/package/lodash.md) ^4.2.0
- [invariant](https://npm.io/package/invariant.md) ^2.0.0
- [loose-envify](https://npm.io/package/loose-envify.md) ^1.1.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^1.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2016-09-14
- 0.0.3 — 2016-09-14
- 0.0.2 — 2016-09-13
- 0.0.1 — 2016-09-13

## README

React Redux Blackbox
=========================

Unofficial React bindings for [Redux](https://github.com/reactjs/redux).  
A more functional approach, but not to be used without a thorough understanding of the official bindings, [react-redux](https://github.com/reactjs/react-redux).

[![Build Status](https://travis-ci.org/l2silver/react-redux-blackbox.svg?branch=master)](https://travis-ci.org/l2silver/react-redux-blackbox)

## Additional Resources
[Functionally sexier unofficial react redux bindings: The Medium Article](https://medium.com/p/a94141ed00c7)  
[TJs frontend-boilerplate with blackbox](https://github.com/l2silver/frontend-boilerplate-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

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