Estoy usando material-UI y redux en reaccionar. Estoy usando redux por primera vez, así que estoy confundido acerca de cómo implementarlo con los elementos de mi lista.

aquí está mi código de product.js y estoy obteniendo datos con éxito en mi tienda redux, se los mostraré a continuación

 const dispatch = useDispatch(); const {loading, product, error, productCount} = useSelector(state => state.products); console.log(loading) console.log(product) console.log(error) console.log(productCount) useEffect(()=>{ const data = dispatch(getProducts()); console.log(data) },[dispatch])

aquí está mi código de tabla

 <TableContainer component={Paper}> <Table sx={{ minWidth: 500 }} aria-label="custom pagination table"> <TableBody> {(rowsPerPage > 0 ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : rows ).map((row) => ( <TableRow key={row.name}> <TableCell component="th" scope="row"> {row.name} </TableCell> <TableCell style={{ width: 160 }} align="right"> {row.calories} </TableCell> <TableCell style={{ width: 160 }} align="right"> {row.fat} </TableCell> </TableRow> ))} {emptyRows > 0 && ( <TableRow style={{ height: 53 * emptyRows }}> <TableCell colSpan={6} /> </TableRow> )} </TableBody> <TableFooter> <TableRow> <TablePagination rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]} colSpan={3} count={rows.length} rowsPerPage={rowsPerPage} page={page} SelectProps={{ inputProps: { 'aria-label': 'rows per page', }, native: true, }} onPageChange={handleChangePage} onRowsPerPageChange={handleChangeRowsPerPage} ActionsComponent={TablePaginationActions} /> </TableRow> </TableFooter> </Table>

si muestro mis datos de redux, recibo datos en esta página

aquí está la imagen de mi consola

Espero que sea suficiente código para describir mi problema, pero si alguien quiere ver más código para entender mi problema, se lo proporcionaré.