I am using material-UI and redux in react I am using first-time redux so I am confused about how to implement it with my list items.
here is my code of product.js and I am successfully getting data in my redux store, I will show you below
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])
here is my code of table
<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>
if I show to my redux data so I am receiving data on this page

I hope it will be enough code to describe my problem but if anyone want to see further code to understand my problem so i will provide it