Higher-Order Components (HoCs)

withStore

import React from "react";
import { withStore } from "react-ion-store";

class MyHeader extends React.Component {
  render() {
    const { title, subtitle } = this.props.store.get(["title", "subtitle"]);
    return (
      <div className="header">
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
    );
  }
}

export default withStore(MyHeader);

withTake

import React from "react";
import { withStore, withTake } from "react-ion-store";
import { compose } from "recompose";

const takeKeys = ["title", "subtitle"]);

class MyHeader extends React.Component {
  render() {
    const { title, subtitle } = this.props;
    return (
      <div className="header">
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
    );
  }
}

export default compose(
  withStore,
  withTake(takeKeys)
)(MyHeader);

withProgressHandlers

import React from "react";
import {
  withStore,
  withCall,
  withProgressHandlers,
  enums
} from "react-ion-store";
import { compose } from "recompose";

const { CallStatus } = enums;

const progressHandlers = {
  [CallStatus.LOADING]: () => <p>LOADING...</p>,
  [CallStatus.FAILED]: () => <p>ERROR...</p>
};

const callKey = "testCall";

const NetworkCall = ({ store }) => {
  const result = store.get(callKey);
  return <p>{result.data.name}</p>;
};

export default compose(
  withStore,
  withCall(
    callKey,
    {
      method: "get",
      url: "https://swapi.co/api/people/3"
    },
    true
  ),
  withProgressHandlers(progressHandlers)
)(NetworkCall);

withLoading

import React from "react";
import { withStore, withCall, withLoading } from "react-ion-store";
import { compose } from "recompose";

const LoadingComponent = () => <p>LOADING...</p>;

const callKey = "testCall";

const NetworkCall = ({ store }) => {
  const result = store.get(callKey);
  return <p>{result.data.name}</p>;
};

export default compose(
  withStore,
  withCall(
    callKey,
    {
      method: "get",
      url: "https://swapi.co/api/people/3"
    },
    true
  ),
  withLoading(LoadingComponent)
)(NetworkCall);

withFailed

import React from "react";
import { withStore, withCall, withFailed } from "react-ion-store";
import { compose } from "recompose";

const FailedComponent = () => <p>ERROR...</p>;

const callKey = "testCall";

const NetworkCall = ({ store }) => {
  const result = store.get(callKey);
  return <p>{result.data.name}</p>;
};

export default compose(
  withStore,
  withCall(
    callKey,
    {
      method: "get",
      url: "https://swapi.co/api/people/3"
    },
    true
  ),
  withFailed(FailedComponent)
)(NetworkCall);