How to connect a component to an action and a reducer in React Redux ?
Recently, while I was improving my react redux project, I could not understand how I would connect to my react component to one of my actions. After spending a couple hours on it. I did some improvements of my skill and wanted to share with you.
Let’s walk through together, I have made a project called Stella which user could be able to see a bunch of actors and comment on them like on them and I wanted to add one more functionality which is updating user information.
I have a button for updating user, as I called Update Account on the nav bar. First of all, I have made one action file inside my action folder, called updating account,
This function does Patch request to database, it has two attributes data and userId, which are necessary for updating. data include only name and password like this;
data = {name:”whatever ”, password:”whatever” }
One more thing about the updateAction, after updating the user, on line 13 we must do dispatch type and payload. Type is where to look inside the reducer, in this example, it will go to case UPDATE_ACCOUNT in reducer. Payload is whatever comes from respond from our patch request. .
After action function, this payload will go to reducer, and finds type: “UPDATE_ACCOUNT in reducer, as you can see on line 20 , case ”UPDATE_ACCOUNT: goes to that line and updates the user with that code.
It looks little confusing after line 20 in below picture, but not really much code in there,
below on line 21, action.payload is our new user with password and name. action.payload.data is coming from serializer that I have in my rails backend.
when I do console.log for action.payload.data, it will give me like this kind of data.
from this, we could be able to get user id, with user.id, and matching this user id with one of the users id, doing user.id === userId, which represents let userId = action.payload.data.id
after we finding the right user, we update the user doing,
user = {…action.payload.data }
with this object, we have updated the user and return also other users with no change doing it with else statement. Also , as you might be familiar return previous state and updated state doing this;
return {…prevState, users: updatedUsers, user: action.payload.data}
After handling action and reducer files, let’s go to main component which I called updateCurrentUser.
in this page, I have state for name and password.
handleChange(event) function, which setStates the name and password.
Also, I have handleSubmit() which is the function triggers the action of our update account with,
this.props.updateAccount(data, parseInt(this.props.userId))
Let’s dive into this more to make this function clearer.
on line 40 we have mdp, which stands form mapDispatchtoProps.
on line 42, we have updateAccount: (data, userId) => dispatch(updateAccount(data, userId))
and on line 45, we have export default connect(msp, mdp)(UpdateCurrentUser)
on line 45 with this connect (msp, mdp), we are connecting on line 42 function to action. on line 45, we could be able to go into action function and do the job for us. After passing through we will be able to go to reducer. and add new updated state there.
we should remember to add this import {updateAccount} from ‘../actions/updateAccount’, to updateCurrentUser component, this it the way how we can bring action function to updateCurrentUser component.
References
