mapState

test.tsx

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import CardComponent from '../../common/ui/CardComponent';
import ContractsTable from './ContractsTable';
import { loadMany, selectors } from './slice';

function ContractList(props: any) {

  const {  list, currentPage, query: queryString, filters, dispatch } = props;

  useEffect(() => {
    if (list.length == 0) {
      dispatch(loadMany(currentPage, queryString, filters));
    }
  }, [queryString, currentPage, filters, list]);


  return (
    <CardComponent icon="file-contract" header="Contracts">
      <ContractsTable contracts={list} />
    </CardComponent>
  )
}

const mapState = (state: { contract: any; }, props: any) => {
  let { contract: { currentPage, filters, query, store }} = state;
  // const filterString = serlializefilters(filters, query);
  return {
    list: Object.values(store),
    currentPage: selectors.currentPageSelector(state),
    query: selectors.queryStringSelector(state),
    filters: selectors.filtersSelector(state)
  };
};

export default connect(mapState)(ContractList);