Introduction to Redux
We will create the Profile slice to store the user data, such as a name from the
DetailsSection, so we can access it from the
PostsSection and display it accordingly.
Create a new folder called features to keep things organized. Then create a file called
profileSlice.js. We will use the
createSlice function in this file to create the slice:
We will use this slice to store the user's name. Let’s go back to
index.js and edit it to make the name field functional.
We want the Name field to be inactive by default, and its value should be set to the
name. When we click the
Change button, it should allow us to edit the field only then.
DetailsSection component currently looks something like this.
Let's divide it into two smaller components to make it more readable and organized.
We will focus on the
ProfileDetails component since it contains the Name field.
We want to use a selector from the
selectName, and we also want to use the action
setName. For this, we need to import the
dispatch methods from
We also need to import the action and the selector from the
Now we will edit the
ProfileDetails section to make the name field functional. The final code will look something like this.
We used a local state called
nameField to make sure the input field is disabled by default and is enabled only when we click the
This is what the app should look like now:
Note: Drag from slider from the left to view the code.
By clicking 'Change' we can change the name.
Note that the state variable
name in the store is updated regardless of whether we click
Save or not. We can also make it so that it only updates in the store when the
Save button is clicked, but it’s unnecessary. Though as a side practice, it is encouraged to try that.
Which two components does DetailsSection contain?
Select a few correct answers