import React, { Component } from 'react';
import axios from 'axios';
export default class CommentList extends Component {
state = {
data: {
comments: [],
loading: false,
},
}
onLoadData = () => {
this.setState({ data: { loading: true } });
axios.get('http://my-api.com/comments')
.then(comments => this.setState({data: { comments, loading: false }}));
}
render() {
if (this.state.data.loading) return <div>Loading, please wait ..</div>;
return (
<div>
<ul>
{
this.state.data.comments.map(({ id, body, author }) =>
<li key={id}>{body} — {author}</li>)
}
</ul>
<button onClick={this.onLoadData} >Load data</button>
</div>
);
}
}
<CommentListPure data={this.state.data} />
CommentContainer
CommentList
import React, { Component } from 'react';
import axios from 'axios';
const CommentListPure = ({ data: { comments }, onLoadData }) => (
<div>
<ul>
{ comments && comments.map(({ body, author }) => <li>{body}—{author}</li>) }
</ul>
<button onClick={onLoadData}>Load data</button>
</div>
);
export default class CommentList extends Component {
state = {
data: {
comments: [],
loading: false,
},
}
onLoadData = () => {
this.setState({ data: { loading: true } });
axios.get('http://my-api.com/comments')
.then(comments => this.setState({ data: { comments, loading: false }}));
}
render() {
if (this.state.loading) return <div>Loading data, please wait ..</div>;
if (this.state.data.comments.length) return <div>No data has been loaded (yet).</div>;
return <CommentListPure data={this.state.data} onLoadData={this.onLoadData} />;
}
}
withStateHOC
withDataHOC
<CommentListPure />
withHandlersHOC
withDataHOC />
Compose
import React from 'react';
import axios from 'axios';
import { compose, withState, withHandlers } from 'recompose';
const CommentListPure = ({ data: { comments }, onLoadData }) => (
...
);
const dataState = withState(
// state name
'data',
// updater method name
'setData',
// default state
{ comments: [], loading: false }
);
const onLoadDataFromREST = (url) => withHandlers({
onLoadData: ({ setData }) => () => {
setData({ loading: false });
axios.get(url)
.then(comments => {
setData({ comments, loading: true });
});
},
});
const withData = compose(
dataState,
onLoadDataFromREST('http://my-api.com/comments'),
);
export default withData(CommentListPure);
withHandlersHOC
withCommentsHOC
<CommentListPure />
withLoadingBar
withDataHOC />
Compose
withStateHOC
withUsersHOC
<UserListPure />
<CommentListPure />
RestContainer
APP 1
graphql HOC
APP 2
<CommentListPure />
redux Connect HOC
APP 3
<CommentListPure />
import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { compose, withState, withHandlers, branch, renderComponent } from 'recompose';
const CommentListPure = ({ data: { comments }, onLoadData }) => (
...
);
const data = graphql(gql`
query CommentsQuery {
comments {
id
body
author
}
}
`);
const Loading = () => (
...
);
const displayLoadingState = branch(
...
);
const withData = compose(
data,
displayLoadingState,
);
export default withData(CommentListPure);