Skip to content

Instantly share code, notes, and snippets.

@alexfedoseev
Last active Aug 29, 2015
Embed
What would you like to do?
Redux: Connector
/* Higher-order Component: Connector */
/* app/bundles/app/components/Comments/CommentsContainer.jsx */
import React from 'react';
import { bindActionCreators } from 'redux';
import { Connector } from 'react-redux';
import Comments from './Comments';
import * as CommentsActions from '../../actions/CommentsActions';
export default class CommentsContainer extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
// Connector has prop `select`, it's a function ->
// receiving state, returning selected branches of the state
// Connector's child is a function ->
// receiving state branches and dispatcher, returning UI Component with props:
// state branches, action creators and the rest
return (
<Connector select={state => ({ comments: state.comments })}>
{({ comments, dispatch }) =>
<Comments
comments={comments}
commentsActions={bindActionCreators(CommentsActions, dispatch)}
{...this.props}
/>
}
</Connector>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment