Recompose

demo-4.js

import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent } from 'recompose';

import { loadCampers } from 'redux/campers/actions';

const enhance = compose(
  connect(
    state => ({
      campers: state.campers.lists,
      loading: state.campers.loading
    }),
    { loadCampers }
  ),
  branch(props => props.loading, renderComponent(Loader)),
  lifecycle({
    componentDidMount() {
      this.props.loadCampers();
    }
  })
);

const Campers = props => {
  const { campers = [] } = props;
  return (
    <div>
      <CamperTable lists={campers.filter(camper => camper.role === 'design')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'marketing')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'programming')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'content')} />
    </div>
  );
};

export default enhance(Campers);