redux and thunk, no API yet

src/components/RestaurantList.js

@@ -1,7 +1,8 @@
 import { useEffect } from "react";
+import { connect } from "react-redux";
+import { loadRestaurants } from '../store/restaurants/actions';
 
-export default function RestaurantList({ loadRestaurants, restaurants })
-{
+export function RestaurantList({ loadRestaurants, restaurants }) {
     useEffect(() => 
     { 
         loadRestaurants(); 
@@ -14,4 +15,11 @@ export default function RestaurantList({ loadRestaurants, restaurants })
             ))}
         </ul>
     );
-};
+};
+
+const mapStateToProps = state => ({
+    restaurants: state.restaurants.records,
+});
+const mapDispatchToProps = {loadRestaurants};
+
+export default connect(mapStateToProps, mapDispatchToProps)(RestaurantList);

src/components/RestaurantList.spec.js

@@ -1,24 +1,28 @@
 import { render, screen } from '@testing-library/react';
-import RestaurantList from './RestaurantList';
+import { RestaurantList } from './RestaurantList';
 
-describe('RestaurantList', () =>
-{
-    it('loads restaurants on first render', () =>
-    {
-        const loadRestaurants = jest.fn().mockName('loadRestaurnats');
-        const restaurants = [];
-        render(<RestaurantList loadRestaurants={loadRestaurants} restaurants={restaurants} />);
-        expect(loadRestaurants).toHaveBeenCalled();
-    });
-    it('displays the restaurants', () =>
-    {
-        const noop = () => {}; //"no operation"
-        const restaurants = 
-        [
+describe('RestaurantList', () => {
+    let loadRestaurants;
+    const restaurants = [
             {id: 1, name: 'Sushi Place'},
             {id: 2, name: 'Pizza Place'}
         ];
-        render(<RestaurantList loadRestaurants={noop} restaurants={restaurants} />);
+    function renderComponent(){
+        loadRestaurants = jest.fn().mockName('loadRestaurnats');
+        render(
+            <RestaurantList
+                loadRestaurants={loadRestaurants}
+                restaurants={restaurants}
+            />
+        )
+    }
+
+    it('loads restaurants on first render', () => {
+       renderComponent();
+        expect(loadRestaurants).toHaveBeenCalled();
+    });
+    it('displays the restaurants', () => {
+        renderComponent();
         expect(screen.getByText('Sushi Place')).toBeInTheDocument();
         expect(screen.getByText('Pizza Place')).toBeInTheDocument();
     })

src/components/RestaurantScreen.js

@@ -1,9 +1,7 @@
 import RestaurantList from "./RestaurantList";
 
-export default function RestaurantScreen()
-{
-    return 
-    (
+export default function RestaurantScreen() {
+    return (
         <div>
             <h1>Restaurants</h1>
             <RestaurantList />