example usage of reselect

FulfillmentContainer.js

import React, { PropTypes } from 'react';
import { compose } from 'recompose';
import { withStyles, onMount, connect } from '_util/HOCs';
import { FlexBox } from '@madmobilenpm/mmui';
import AppView from 'view';
import { getGroupedFulfillments, getFulfillmentById } from '_redux/selectors';
import * as actions from 'actions/fulfillment';
import FulfillmentList from 'components/fulfillment/FulfillmentList';
import FulfillmentOrderHeader from 'components/fulfillment/FulfillmentOrderHeader';
import ProductList from 'components/fulfillment/ProductList';

type Props = {
  props?: void,
  groupedFulfillments: { [key: string]: FulfillmentMethod },
  unfulfilledCount: number
};

type WrappedProps = {
  styles: Styles
} & Props;

const componentStyles = ({ theme: { colors } }) => ({
  container: {}
});

export const FulfillmentContainer: Component<WrappedProps> = ({ styles, groupedFulfillments, unfulfilledCount, setSelected, selectedFulfillment }) =>
  <AppView title="Fulfillment">
    <FlexBox align="stretch" flex="1 1 auto">
      {selectedFulfillment.orderDetails ?
        <FlexBox column align="stretch" flex>
          <FulfillmentOrderHeader orderDetails={selectedFulfillment.orderDetails} />
          <ProductList products={selectedFulfillment.orderDetails.products} />
        </FlexBox> :
        <FlexBox column align="center" justify="center" flex>
          It looks like you haven't selected a fulfillment method
        </FlexBox>
      }
      <FulfillmentList
        setSelected={setSelected}
        groupedFulfillments={groupedFulfillments}
        unfulfilledCount={unfulfilledCount}
        selectedId={selectedFulfillment.id} />
    </FlexBox>
  </AppView>;

export const enhancer = compose(
  connect(state => ({
    groupedFulfillments: getGroupedFulfillments(state).toJS(),
    unfulfilledCount: state.app.config.modules.fulfillment.badgeCount,
    selectedFulfillment: getFulfillmentById(state, state.fulfillment.selectedId).toJS()
  }),
  actions),
  onMount(props => {
    props.loadFulfillmentCount();
    props.getFulfillmentList();
  }),
  withStyles(componentStyles)
);

const WrappedComponent: Component<Props> = enhancer(FulfillmentContainer);

export default WrappedComponent;