https://github.com/l2silver/react-redux-blackbox
Unofficial react to redux bindings
https://github.com/l2silver/react-redux-blackbox
Last synced: 6 months ago
JSON representation
Unofficial react to redux bindings
- Host: GitHub
- URL: https://github.com/l2silver/react-redux-blackbox
- Owner: l2silver
- License: mit
- Created: 2016-09-10T21:06:28.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-09-14T04:02:34.000Z (almost 10 years ago)
- Last Synced: 2025-01-31T04:08:11.917Z (over 1 year ago)
- Language: JavaScript
- Size: 380 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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).
[](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){
}
```
Provider passes its only child the blackbox object through props, and from their you pass the blackbox to all the filterConnect components