Conteúdo do Curso
Introduction to Redux
Introduction to Redux
2. Fundamental Concepts
Creating the Profile Slice
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.
The 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 profileSlice
, namely selectName
, and we also want to use the action setName
. For this, we need to import the useSelector
and dispatch
methods from react-redux
:
We also need to import the action and the selector from the profileSlice
:
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 Change
button.
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.
Tudo estava claro?