App.js

// containers/App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { compose, lifecycle } from 'recompose';
import { provideState, injectState } from 'freactal';
import { initialState, effects, computed } from 'state';
import Summary from 'components/Summary';

const provider = provideState({
  initialState,
  effects,
  computed,
});

const App = () => (
  <Router>
    <Route exact path="/" component={Summary} />
  </Router>
);

const enhance = compose(
  provider,
  injectState,
  lifecycle({
    componentDidMount() {
      this.props.effects.fetchData();
    },
  }),
);

export default enhance(App);

state.js

// INITIAL STATE

export const initialState = () => ({
  orders: [],
  id: '',
  name: '',
});

// EFFECTS

const fetchData = () => fetch('/public/data.json')
  .then(response => response.json())
  .then(data => state => ({ ...state, ...data }));

export const effects = {
  fetchData,
};

// COMPUTED

const totalOrders = ({ orders }) => orders.length;

const grossRevenue = ({ orders }) => orders.reduce((gross, order) => {
  //  Get the gross value of the order by totalling the items
  const orderGross = order.items.reduce((total, item) =>
    total + (Number(item.price) * item.quantity),
    0,
  );

  return gross + orderGross;
}, 0);

export const computed = {
  totalOrders,
  grossRevenue,
};

Summary.js

//components/Summary.js

import React from 'react';
import { injectState } from 'freactal';
import { currency } from 'helpers';
import Title from 'components/Title';
import Text from 'components/Text';

const Summary = injectState(({ state }) => (
  <div>
    <Title>Summary</Title>
    <Text bold>Total orders: {state.totalOrders}</Text>
    <Text>Gross revenue: {currency(state.grossRevenue)}</Text>
  </div>
));

export default Summary;