import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; // The same api state machine as before const withApiState = TargetComponent => class extends React.Component { state = { current: "idle" }; apiState = { pending: () => this.setState({ current: "pending" }), success: () => this.setState({ current: "success" }), error: () => this.setState({ current: "error" }), idle: () => this.setState({ current: "idle" }), isPending: () => this.state.current === "pending", isSuccess: () => this.state.current === "success", isError: () => this.state.current === "error", isIdle: () => this.state.current === "idle" }; render() { return ; } }; // A new HOC that fetches data via a passed `fetcher` prop const withData = TargetComponent => { class WithData extends React.Component { static defaultProps = { mapper: f => f }; state = { data: null }; componentDidMount() { this.fetchData(); } fetchData = async () => { const { apiState, fetcher, mapper } = this.props; try { apiState.pending(); const result = await fetcher(); const data = mapper(result); this.setState({ data }); apiState.success(); } catch (e) { apiState.error(); } }; render() { const { mapper, fetcher, ...rest } = this.props; return ( ); } } return withApiState(WithData); }; const fakeData = [ { name: "Kristofer", age: 31 }, { name: "Peter", age: 31 }, { name: "Siri", age: 28 }, { name: "Anne", age: 32 } ]; // A fake server call that takes a second to resolve, and fails every so often const fakeServer = () => new Promise((resolve, reject) => setTimeout( () => (Math.random() > 0.3 ? resolve(fakeData) : reject("explode")), 1000 ) ); function App({ apiState, data, refetchData }) { const canRetry = apiState.isSuccess() || apiState.isError(); return (

Data fetching example

{apiState.isIdle() &&

This will never be idle

} {apiState.isPending() && (

Please wait, fetching data!

)} {apiState.isSuccess() && data.map(user => (

{user.name} is {user.age} years old

))} {apiState.isError() && (

Argh, encountered an error

)} {canRetry && }

); } const AppWithData = withData(App); const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

data fetching example