App.js

// 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