< 1 min read

I like react-redux a lot, but a lot of times the higher-order component really confuses me. The decorator from ES7 is a really good way to think about using 2 functions as parameters.

A lot of folks use their own methods of connecting components to stores, and I have found, what I consider to be the most solid.

For sake of brevity on this howto I'm going to reference this stackoverflow article

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

converts to:

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

Try it out!

Horrible Howto Disclaimer: I am not creating these as new content, but more as a common reference for myself, and for friends to reference to when we are making apps together!

Sam Clark

Sam Clark

Read more posts by this author.