Skip to content

Instantly share code, notes, and snippets.

@gabrielhpugliese
Last active December 23, 2015 20:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gabrielhpugliese/3c3bf1fd42153ae24440 to your computer and use it in GitHub Desktop.
Save gabrielhpugliese/3c3bf1fd42153ae24440 to your computer and use it in GitHub Desktop.
import { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as CounterActions from '../actions/counter';
const counterProps = ({ counter }) => ({ counter });
const dispatchToActionCreators = dispatch => bindActionCreators(CounterActions, dispatch);
@connect(counterProps, dispatchToActionCreators)
class Counter extends Component {
render () {
const { counter, increment, decrement } = this.props;
return (
<div>
<h1>Counter: {counter}</h1>
<button onClick={() => increment()}>+</button>
<button onClick={() => decrement()}>-</button>
</div>
);
}
}
export default Counter;
@gaearon
Copy link

gaearon commented Dec 23, 2015

You can use the fact that second arg to connect() can just be an object to make it even shorter:

import { Component } from 'react';
import { connect } from 'react-redux';

import * as CounterActions from '../actions/counter';

const counterProps = ({ counter }) => ({ counter });

@connect(counterProps, CounterActions)
export default class Counter extends Component {
  render () {
    const { counter, increment, decrement } = this.props;

    return (
      <div>
        <h1>Counter: {counter}</h1>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    );
  }
}

@gabrielhpugliese
Copy link
Author

That's even better!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment