React Redux 与 React Table

Question

我正在尝试学习 react table 和 react redux，我无法搜索它们的引用一起使用的东西，有人可以提供一个我可以参考的示例，以便我自己实现它吗？ TIA

到目前为止，这是我的组件，它不会给我一个错误并且可以很好地获得 redux 状态，但不会在表上呈现数据。

function ResidentTable({ history }) {
  const dispatch = useDispatch();

  const userLogin = useSelector(state => state.userLogin);
  const { userInfo } = userLogin;

  const residentList = useSelector(state => state.residentList);
  const { loading, error, residents } = residentList;

  useEffect(() => {
    if (!userInfo || !userInfo.isAdmin) {
      history.push('/login');
    } else {
      dispatch(listResidents());
    }
  }, [dispatch, history]);

  const columns = useMemo(() => RESIDENT_COLUMNS, []);
  const data = useMemo(() => residents, []);
  const tableInstance = useTable(
    { columns, data },
    useFilters,
    useGlobalFilter,
    useSortBy,
    usePagination
  );
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    prepareRow,
  } = tableInstance;

  return (
    <Box p="2rem 8rem">
      <ModalResident />
      <Table
        size="lg"
        variant="striped"
        colorScheme="blackAlpha"
        {...getTableProps()}
      >
        <TableCaption placement="top">
          <Heading>Metroville Residents List</Heading>
        </TableCaption>
        <Thead>
          {headerGroups.map(headerGroup => (
            <Tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <Th
                  fontSize="1.2rem"
                  fontFamily="Raleway"
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                >
                  {column.render('Header')}
                  <Text as="span">
                    {column.isSorted ? (
                      column.isSortedDesc ? (
                        <ChevronDownIcon />
                      ) : (
                        <ChevronUpIcon />
                      )
                    ) : (
                      ''
                    )}
                  </Text>
                  <Box onClick={e => e.stopPropagation()}>
                    {column.canFilter ? column.render('Filter') : null}
                  </Box>
                </Th>
              ))}
            </Tr>
          ))}
        </Thead>
        <Tbody {...getTableBodyProps()}>
          {page.map(row => {
            prepareRow(row);
            return (
              <Tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <Td
                      fontSize="1 rem"
                      fontFamily="Raleway"
                      {...cell.getCellProps()}
                    >
                      {cell.render('Cell')}
                    </Td>
                  );
                })}
              </Tr>
            );
          })}
        </Tbody>
      </Table>
      <Flex justify="space-between" my="1rem">
        <Button disabled={!canPreviousPage} onClick={() => previousPage()}>
          <ArrowBackIcon />
          Prev
        </Button>
        <Button disabled={!canNextPage} onClick={() => nextPage()}>
          Next
          <ArrowForwardIcon />
        </Button>
      </Flex>
    </Box>
  );
}

Answer 1

经过实验和许多错误之后，我重构了我的代码，使其更加统一和可读，并使其工作。我将 react-table 组件分离到另一个组件，以便我可以将它重用于其他表，并添加了加载，因此它将等待 redux 状态加载，然后将其渲染为空或出错。

function ResidentTable({ history }) {
  const dispatch = useDispatch();

  const residentList = useSelector(state => state.residentList);
  const { loading, error, residents } = residentList;

  const userLogin = useSelector(state => state.userLogin);
  const { userInfo } = userLogin;

  useEffect(() => {
    if (!userInfo || !userInfo.isAdmin) {
      history.push('/login');
    } else {
      dispatch(listResidents());
    }
  }, [dispatch, history, userInfo]);

  const columns = useMemo(() => RESIDENT_COLUMNS, []);
  const data = useMemo(() => residents, [residents]);

  return (
    <Box p="2rem 8rem">
      <ModalResident />
      {loading ? (
        <Loader />
      ) : error ? (
        <Message status="error">{error}</Message>
      ) : (
        <BaseTable data={data} columns={columns} />
      )}
    </Box>
  );
}