Skip to content

Instantly share code, notes, and snippets.

@victorhqc
Created September 26, 2017 19:25
Show Gist options
  • Save victorhqc/a3c138d22827195ad7c4894eba217d17 to your computer and use it in GitHub Desktop.
Save victorhqc/a3c138d22827195ad7c4894eba217d17 to your computer and use it in GitHub Desktop.
HighOrderComponents Problems Example
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { recompose } from 'recompose';
import translate from './highOrderComponents/withTranslate';
import clickOutside from './highOrderComponents/clickOutside';
import withUser from './highOrderComponents/withUser';
import {
configureUser,
} from './store/actions';
class MyCoolComponent extends Component {
render() {
const {
translate,
isActive,
onClick,
user,
preferences,
onConfigureUser,
} = this.props;
if (!isActive) {
return null;
}
return (
<div onClick={onClick}>
{translate('welcome', user.name)}
<button onClick={onConfigureUser}>
{translate('configure', preferences)}
</button>
</div>
);
}
}
const mapStateToProps = state => ({
preferences: state.preferences,
});
const mapDispatchToProps = {
configureUser,
};
export default compose(
translate,
clickOutside,
withUser,
connect(mapStateToProps, mapDispatchToProps),
)(MyCoolComponent);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment