Example of functionnal connected component

Config.js

import React, { useEffect } from 'react';
import ActionBar from '../../../ui/layout/ActionBar';
import {
  getDealersSelect,
  getSelectedDealer,
  getSelectedDealerId,
  getDealersIsFetching,
  getDealersLinks,
  getDealersApiError
} from '../../../../selectors/dealerSelectors';
import { connect } from 'react-redux';
import ConfigTitle from './ConfigTitle';
import ConfigTabs from './ConfigTabs';
import { Form, PaginatedSelect } from '../../../ui/base';
import { withRouter } from 'react-router';
import { FormattedMessage } from 'react-intl';
import {
  selectDealer,
  fetchDealersSelect
} from '../../../../actions/dealerActions';
import { isEmpty } from 'ramda';
import { fetchNextPage } from '../../../../actions/paginationActions';
import { FETCH_DEALERS_SELECT_REQUEST } from '../../../../constants/ActionTypes';

const Config = ({
  dealers,
  selectedDealer,
  selectDealer,
  selectedDealerId,
  isFetching,
  apiError,
  fetchDealers,
  fetchNextPage,
  links,
  match,
  history
}) => {
  useEffect(() => {
    if (isEmpty(dealers) && !isFetching) {
      fetchDealers();
    }

    if (match.params.dealerId) {
      selectDealerCallback(match.params.dealerId);
    } else {
      if (selectedDealerId) {
        history.push(`/config/dealers/${selectedDealerId}/general`);
      }
    }
  }, []);

  const selectDealerCallback = id => {
    selectDealer(id);
    history.push(
      `/config/dealers/${id}/${match.params.configTab || 'general'}`
    );
  };

  return (
    <>
      {!isEmpty(dealers) && (
        <ActionBar
          actions={
            <PaginatedSelect
              items={dealers}
              onSelect={selectDealerCallback}
              links={links}
              isFetching={isFetching}
              apiError={apiError}
              loadMore={fetchNextPage}
              defaultLabel="DealerSelect.default"
            />
          }
        />
      )}
      {selectedDealer ? (
        <>
          <ConfigTitle dealer={selectedDealer} />
          <ConfigTabs
            dealerId={selectedDealer && selectedDealer.id}
            defaultActiveKey={match.params.configTab}
          />
        </>
      ) : (
        <FormattedMessage id="page.user.error.accessRights.atLeastOneDealer" />
      )}
    </>
  );
};

const mapStateToProps = state => ({
  dealers: getDealersSelect(state),
  selectedDealer: getSelectedDealer(state),
  selectedDealerId: getSelectedDealerId(state),
  isFetching: getDealersIsFetching(state),
  links: getDealersLinks(state),
  apiError: getDealersApiError(state)
});

const mapDispatchToProps = dispatch => ({
  selectDealer: dealerId => dispatch(selectDealer(dealerId)),
  fetchDealers: () => dispatch(fetchDealersSelect()),
  fetchNextPage: () => dispatch(fetchNextPage(FETCH_DEALERS_SELECT_REQUEST))
});

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Form.create({})(Config))
);