Last active
April 25, 2018 22:15
-
-
Save tylerthebuildor/5cae54f50ecc6323b6b32be01e116647 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // First install decorator plugin: yarn install core-decorators | |
| // | |
| // Then add the plugin to your .babelrc: | |
| // { | |
| // ... | |
| // "env": { | |
| // "development": { | |
| // "plugins": [ | |
| // ... | |
| // "transform-decorators-legacy" | |
| // ] | |
| // } | |
| // } | |
| // } | |
| import React from 'react'; | |
| import { connect } from 'react-redux'; | |
| import actions from './actions'; // all your actions | |
| export default function redux(callback = state => state) { | |
| return function(component) { | |
| return connect(callback, actions)(component); | |
| }; | |
| } | |
| // Elswhere in your code: | |
| import React from 'react'; | |
| import redux from './redux'; | |
| // @redux argument is optional | |
| // default will subscribe component to all state changes | |
| // great for prototyping | |
| @redux() | |
| export default class App extends React.PureComponent { | |
| render() { | |
| return ( | |
| <h1>{this.props.someReduxValue}</h1> | |
| ); | |
| } | |
| } | |
| // for later optimization you can select which pieces of state to subscribe too | |
| @redux(({ someReduxValue }) => ({ someReduxValue })) | |
| export default class AppOptimized extends React.PureComponent { | |
| render() { | |
| return ( | |
| <h1>{this.props.someReduxValue}</h1> | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment