|
1 | 1 | import Grid from "@mui/material/Grid"; |
2 | | -import React from "react"; |
3 | | -import { useSelector } from "react-redux"; |
| 2 | +import React, { useEffect } from "react"; |
| 3 | +import { useDispatch, useSelector } from "react-redux"; |
| 4 | +import { getAllBooks } from "../../store/actions/bookActions"; |
4 | 5 | import BookCard from "./BookCard"; |
5 | 6 |
|
6 | 7 | export default function BookCardList() { |
7 | 8 | const { books } = useSelector((state) => state.book); |
| 9 | + const bookDispatch = useDispatch(); |
| 10 | + |
| 11 | + useEffect(() => { |
| 12 | + bookDispatch(getAllBooks()); |
| 13 | + }, []); |
| 14 | + |
8 | 15 | return ( |
9 | 16 | <div> |
10 | | - <Grid sx={{mt:3, padding: 2}} container spacing={3}> |
| 17 | + <Grid sx={{mt:3, padding: 2}} container spacing={3}> |
11 | 18 | {books?.map((book) => ( |
12 | 19 | <Grid spacing={3} item xs={8} md={5} lg={4}> |
13 | 20 | <BookCard key={book.id} book={book} /> |
|
0 commit comments