Implement a mapDispatchToProps() function to connect a Redux action to a component event

In this lab you will be implementing a mapDispatchToProps() function for an application that helps us keep track of our favorite restaurants. Our React application is kept separate from our Redux application through the use of the Provider component and the connect() function. When you have completed the lab, there should be no reference to the store in any component other than the Provider.

Much of the functionality of the app is already built out for you. We have two components: a RestaurantInput component that consists of a simple form to add a new restaurant, and a Restaurants component that renders the names of the restaurants to the page. Redux has already been set up through index.js and the reducer manageRestaurants. In addition, the Restaurants component has been connected to the store and a mapStateToProps() function implemented to provide the list of restaurants to the component as props.

Recall that, in the previous codealong, we wrote both the mapStateToProps and mapDispatchToProps functions in our App.js file. For this application, however, we have separated our form code from the code rendering the list of restaurants. There is no reason we can't use connect() with both components. Your task is to write a mapDispatchToProps() function in the RestaurantInput component, which will allow us to pass dispatched actions as props. Remember that mapDispatchToProps() is provided dispatch as an argument (passed in by connect when called), so we can wrap an imported action with dispatch within mapDispatchToProps(). Don't forget that the action provided in actions/restaurants.js is a function that must be called in order to return the action object.

HINT: remember that connect() passes dispatch as the second argument. Since you won't have a mapStateToProps action in your RestaurantInput component, you can ensure that dispatch is passed to mapDispatchToProps by passing null as the first argument to connect.