// App.js
// import the useEffect React hook
import React, { useEffect } from 'react'
// import the useDispatch Redux hook
import { useDispatch, useSelector } from 'react-redux'
// import our fetchRecipes thunk
import { fetchRecipes, recipesSelector } from './slices/recipes'
const App = () => {
// initialize the redux hook
const dispatch = useDispatch()
const { recipes, loading, hasErrors } = useSelector(recipesSelector)
// dispatch our thunk when component first mounts
useEffect(() => {
dispatch(fetchRecipes())
}, [dispatch])
return (
<section>
<h1>Recipes</h1>
</section>
)
}
export default App
view raw App.js hosted with ❤ by GitHub