Besides these improvements we already applied,
there are other things we can optimize in our application,
for example we do we use this updateObject utility from our reducers, there we call updateObject all
the time.
Now if we have a look at our contact data component, there we will see that in the inputChangedHandler,
we're also kind of updating objects to the order form and to order form elements in there.
So we're also updating objects here,
why don't we use our utility function here then? Right now, it's placed in the store folder,
I'll now create a new subfolder directly in the source folder which I'll name shared
and in there, I'll add my or I'll move my utility file into that folder,
that of course means that the imports in my reducers need to be adjusted.
Now it's imported from one level up, an additional level up,
then the shared folder and then the utility file.
So this adjusted import path has to go into all my reducers so that the application then works again.
With that it's now placed in a path where it makes sense because now we can access it from anywhere in the
application without the path looking strange because why would a general utility be placed in the store folder,
and now we can go to contact data and import this utility function. So we can import our updateObject
function from
and now we just go up all the way to the top to the shared folder and there to the utility file.
Now we can use updateObject in this file too
and I want to use it in my inputChangedHandler for updatedFormElement.
In the end, we can call updateObject here and pass my order form and there, it shows the control.
So I can pass this.state.orderForm and access the input identifier as the old object,
this is essentially what I want to update, the object
I plan to update and then I need to pass a second argument which is a javascript object with all the
properties I want to overwrite.
Now these properties can be found here,
value, valid and touch
so I can simply set up value here, valid and touched and copy the respective values I use down there
without semi-colons at the end because we're inside an object
so let's add a comma instead.
The same for checkValidity here and the same for true on touched,
so let's replace the semi-colon here
too. And now we're updating the form element by taking the old one and updating it safely with the update
object helper method, we can now get rid of all these lines of code
and now we want to update the overall order form for a given input identifier.
Well for this, we can now take this code here and create this constant but create it by also calling
updateObject here,
passing this.state.orderForm as the old object and a javascript object where we want to configure the
new properties and the new property should be this dynamic input identifier where we pick a specific
control, which we of course store as properties in our order form object in the state,
like name, street and so on.
So this is now what I want to update and the value will be the updatedFormElement here
so now we can get rid of this line too.
And now we optimize this a bit and we're using to utility function we already used before,
well one note checkValidity here where we use updatedFormElement value,
that of course has to be event.target.value now
and here for validation, it should be this.state.orderForm,
essentially it should be this input identifier here. With that let's see if that works,
if we now save that and go back to our application, let's expand this, let's quickly login here,
switch to sign in,
now if I go on to the contact data form here, let's see if that still works.
Looks good,
I'm still getting validation errors and so on,
so i seemed to be required to enter valid information here,
so that is a good sign that our orders still is processed correctly and if we send that auth to the back
end, we expect this new order,
we also see that all the data was passed on correctly.
So now this is working, we're using updateObject and we're not limited to this file,
the auth container is similar. There
we also handle a form
and there, we also update our controls. So we can also import this function there, import updateObject
from
and now let's go up to our shared folder and there, to the utility file.
Now let's grab updateObject and use it in the auth container too, here
I want to update my total controls so I'll pass this.state.controls as the old object which I want to
update and then I'll pass a javascript object with the properties I want to change
and here it's this control name where I can just cut this code and paste it in here,
get rid of the old one and in control name I again update an object,
so I simply nest another updateObject call where I update this object which I distributed prior to
my utility function and the properties I passed to this internal object are value, valid and touched,
just like in the contact data.
And now again I'm using updateObject to have a little bit leaner code and less duplication,
of course you might find more places in the application where you can use it,
definitely feel free to dig through with the application and use updateObject or other utility functions
you can come up with
whenever they make sense.