React-Redux: A Deep Dive Into MapDispatchToProps
The final project for Flatiron’s Software Engineering School was to create a single page application (SPA) with a Rails API to handle the data persistence with a database while using React for the front-end.
My approach to the project was to land on an idea, plan out the project to meet the school’s requirements, begin coding in React, add Redux Thunk and complete the project.
One of the most challenging parts of the project was understanding Redux. I ran into a particularly tough Redux-related error in my project, which I’ll focus on in this article as I do a deep dive into MapDispatchToProps.
What is MapDispatchToProps?
First, what the heck is MapDispatchToProps, or MapDispatch, as it is commonly referred to? It is the second argument passed in to connect, used for dispatching actions to the store. If a second argument isn’t specified in connect(), then the component will receive dispatch by default.
Dispatch is a function of the Redux store. Connect is needed to access the store — components can never access it directly.
Debugging the error.
Below is a screenshot of an error I experienced as I tried to add a race to the race list. Spoiler alert: I resolved the error and below is my thought process for each step I took to debug.
Step 1: Double check to make sure the Rails server is running.
I experienced a few errors previously due to the Rails server being disconnected, so the first thing I did was to make sure my race list was rendering properly on the Rails server, and it was.
Step 2: Review the post request on the backend.
The error on the frontend console was telling me this is a bad post request. I know the post method in Rails is used to send data to the server, and the server is expected to use this data to create something new. As a next step, I reviewed the Ruby code in the create method, since this is where the post request happens on the backend.
Param is missing! Now we’re getting somewhere.
Step 3: Check to make sure params are being permitted.
This was an issue with a prior project, so I checked to make sure all params were being permitted through strong params, and they were.
Step 4: Add a console.log in the form’s handleOnSubmit.
Based on the screenshot in Step 2, I saw that “race” was returning an empty hash, which seemed core to the error. I needed to look at thefrontend code and started console logging in my code to determine where in my code flow the error is occurring.
At this point, I know that races are fetching properly, and the error is happening around the time I click “Add Race,” which leads me to the handleOnSubmit method on the race form.
I decided to console.log(this.state.name) to see what was happening.
On the screenshot above, console.log is hit on line 23 and “Chicago Marathon” is being received as the input.
Step 5: Review the mapDispatchToProps function.
Next, I followed my code to where CopiedCreateRaceFetch is created, which brings us to mapDispatchToProps.
mapDispatchToProps is a function that dispatches actions to the Redux store. It takes dispatch, and connects to the Redux store through connect. copiedCreateRaceFetch is a key that returns a function. While it is convention to name the key the same name as the action creator, I find this confusing, which is why the variable name has “copied” included. The function race is dispatching createRaceFetch, which is imported from the actions folder. The function is saved in copiedCreateRaceFetch, which is being called in handleOnSubmit above. The mapDispatchToProps function should return an object.
Step 6: Add a debugger in the form’s handleOnSubmit.
Next, I went back to handleOnSubmit and added a debugger so that I could determine if the mapDispatchToProps function was indeed returning a function.
After the debugger was hit, I checked a few things in the console. This is where I spotted that copiedCreateRaceFetch was returning an empty hash and it was expecting an object. However, this.state.name was returning a string.
What I did to resolve the issue was to change “this.state.name” to “this.state,” which returns an object versus a string. After extensive debugging and making that simple change, I was able to successfully add a race to the list.
Materials that were referenced for this article:
- https://react-redux.js.org/using-react-redux/connect-mapdispatch
- Flatiron School’s Software Engineering Program Phase 5 Curriculum
