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
.