So we had the assignment,
well we can create a person and we populate name and age randomly or the age
randomly, the name is hardcoded in the reducer.
Of course it would be a typical use case to have input fields for the user to use to specify these values,
how would that work?
It's a typical case of local UI state.
You did of course learn over the last modules in this course that for user input, we also handle this
with set state and in the state in general and for that, we don't need to use Redux just to store the
value the user input.
We need it then if we want to create a person with that input
but just to handle each keystroke and use two-way binding,
we don't necessarily use Redux.
So in add person where we have our button, let's say we now also add inputs and I'll make this very simple,
I'll add an input of type text with a placeholder of name and then a second one with age and this will
be of type number,
so super simple input fields here which allow us to add a person.
Now we can turn add person into a component using the class keyword to manage the state of these inputs,
let's simply do that.
Alternatively you could of course implement the useState hook if you're using that version of React.
I'll add component here to the import and turn this into a class,
class, add person with a capital character, extends the component and in the class body, we'll have the render
method where we in the end return some JSX and that is the JSX we used before.
So I'll paste it in there, get rid of the part down there and we're almost good to go,
props now becomes this props though because we're inside a class. So thus far, this should work
as before,
we also need to adjust the export here to capitalize the A, so this should work as before.
Now I can use or setup the local UI state, so the same state we used before in the entire course
and there I'll have my name which is an empty string
let's say initially and my age which could be null initially. And then I'll add my method, the nameChangedHandler
where I get my event object and where I then simply call this set state to update the
name to event target value
and the goal is to execute the nameChangedHandler on every keystroke and I'll have my ageChangedHandler
where I get the event where the target is to call this set state and of course set the age
to event target value on every keystroke.
And now we can bind our inputs, add the onChangeHandler, bind it to this nameChangedHandler for the
name input and I'll simply distribute this over multiple lines to make it easier to read,
we now also need to bind the value to have two-way binding so that our type, our keystrokes are actually
reflected in the input. So I'll bind this to this state name
and now for the second input also over multiple lines, I'll add onChange, bind this to this ageChangedHandler
and the value is equal to this state
age,
just like that. So far, that is all the stuff we learned before this module,
it has nothing to do with Redux,
we are managing the state of this component in itself,
so inside the component and that is what I meant on that slide where I talked about different types
of state.
This is a typical use case of local UI state
you could say. Whatever the user entered into these inputs here probably isn't relevant to the entire
application,
there is no need to store this in the global Redux store,
you can absolutely store it in the state of that component because it only matters to that component,
it does matter to the other components as soon as this button is clicked. So here, we will pass an anonymous
function so that we can pass some data along to the props here,
so to person added, to whichever method we get here.
I want to pass this state name and this state age along with it, so that in the container where we handle
the person added prop, where we connect a method to it, where we previously add it on added person or execute
this, that there we now actually take advantage of the arguments we receive.
So on added person of course refers to this method or this function we use to dispatch an action,
well we now know that we get the name and age as arguments, so we should use that in the container.
Here we get name and age in the end,
so when we dispatch something, we can add name, set this equal to name and age, set this equal to age or one
single property which we could name person data or payload or whatever you want which then holds
name and age mapped to the respective argument. And now with that, we can go to our reducer and extract
the value the user entered.
So for the name, we would get action and then I used the key named person data and that would hold an object
with name and ages keys, so I would access action person data.name for the name and for the age, it
would be action person data.age.
And now if we save all files and fix this error by going back to add person and setting age not to null
but to an empty string, tiny mistake on my side,
so to an empty string, if we do this, now we can enter Max 28 here, add person and we get Max 28
and if we change it, you'll see that's reflected in our components which we still can delete here
but now we're combining both, local UI state to handle the input and then still Redux to handle the created
person which affects broader parts of our application.
And I wanted to show you this, how to handle user input, how to handle that in a Redux world and how to
differentiate between local UI state as we use it here for information that really is only relevant
to this component and the global state managed through Redux for information which is important for our entire
application.