In the last video we got some good work done on our stream component.
I'm back in my stream list.
I'm going to click on edit again so I see my initial values for my Stream right here.
I'm going to again change those very quickly to some jibberish.
And when I click on submit I see the same console log as what we had at the end of the last video.
Now I had said that there was something a little bit off with the console log right here.
So this is kind of a technicality.
And technically our application would work just fine as is.
But it's something I want to throw out there because this is something that might get you in trouble
when you start working on your own projects and it really comes down to how your back and server is
set up.
So take a look at the console log right here.
Notice how we've got the description and the title which is totally expected.
However we also have the I.D. and a user ID in here as well.
Now why is that an issue.
Well remember our edits stream form right here is about only allowing a user to change a title and a
description.
When we eventually call this on Samit callback right here in site of stream edit we're getting some
object that contains what are supposed to be updates to our stream object.
In other words form values right there is only supposed to contain properties that are supposed to change
on our form so form values is supposed to tell us about the set of changes we want to make to the form
we're going to eventually take that object and push it up to our API and where he essentially telling
our API hey here are some change properties that you should use to update some given Stream.
Now the issue with this is that when we pass in the ID a for a year and the user id it kind of makes
it seem as though we have changed the ID or the user ID.
And those are both properties that we do not at all ever want to change.
Well maybe the user id but we probably don't want to change the idea of the stream at any point.
So again this is really a technicality.
It's not going to cause an issue with the API that we're making use of right now.
But if you ever start to use some other back and server where they expect to receive a put request or
a request to update a record they might do some validation and expect that the change set not contain
an ID or not contain something like user ID.
In other words we don't really want to push up values inside this change object of sorts.
That did not actually change because your back and server you might eventually work with an API that's
going to complain about that and say hey you can't tell me that like you have some different idea here
or something like that.
So essentially all I'm saying here is that we want to kind of trim down the properties that we see inside
the subject.
Now the real question here is why is the ID and the user ID showing up in the first place at all if
we're only supposed to show change properties like description and title.
Well the real issue here is that inside of stream edit when we set up those initial values we put in
the entire stream object right here.
So essentially when we pass in that entire object every property inside there is used as some initial
value for the form.
So even though we don't see inputs for those other properties they are still loaded up in the form or
inside of redux form as some initial values for the form.
I can actually kind of prove that to you if we go back over here to our application on stream and we
open up redux dev tools and select states you can then look at form open up stream form and then you'll
take a look at values values right here is an object that contains all the different current values
for the stream form.
And inside there you'll see that we not only have the title and description we also have the user id
and the ID.
So redux form thinks that our form is supposed to have a field for user ID and for ID as well.
And when we submit this form redux form is going to pass along that user ID and the ID which again not
the worst thing for the application but is just really not appropriate to try to eventually Smet to
some back end API.
So we're only seeing user ID and ID right here because we are passing them in as some initial values.
So long story short long story short here kind of a long section.
Talk about a very small thing.
Essentially we only want to pass in an object here with a title and a description just the properties
we are trying to change.
Now there is more than one way we could do this.
The first way we could do it would be to put an object back in here again as we had previously.
So two sets of curly braces on either side and then we can say the title is coming from this dot prop's
dots Dreamcoat title.
And then we can duplicate that same thing for our description property as well.
Well I'm going to show you another way of handling this that's going to be just a little bit more concise.
So I'm going to delete everything in between those curly braces and then at the very top of this file
We're going to import load ash.
Remember that is that helper library that we've been using quite a bit.
So we're going to use a function from Lotus to basically just pick out the values or the properties
from that stream object that we care about and that we actually want to pass down as initial values
to our form.
So back down at initial values right here I'm going to say underscore dot pick
and then I'm going to put in my stream object.
This dot props start Stream.
And then I will put in a list of all the different properties that I want to essentially pull out of
that object and pass down to initial values.
So in our case we want to pick out title and description.
And let me say this you can see the entire line very easily OK.
Let's test this out very quickly and we'll take a look at a quick example of how pick works just in
a little bit more greater detail.
So I going to save this I'm going to flip back over.
Now I'm back at my form right here and if I look at my redux dev tools and look at my state I can open
up loops form again.
I can look at my stream form I can look at values and I'll see that I only have the title and description
loaded up into redux form.
So now if I change these and submit the form again I see that my essentially kind of like change object
right here only has the title and description no longer is my idea inside there no longer is the user
ID inside there.
It's only the properties that I actually changed inside the form.
All right.
So again we did that by making use of this pick function from loadout.
So just really quickly I want to show you a quick example of what pick is really doing for us even though
I mean you can probably imagine what it's doing.
Let me give you a quick example.
Nonetheless someone to do my favorite thing hearing and a pull up in that little code editor again there
is the link to it if you want to follow along so inside if you're all put together some object like
say profile and I'll give it a name of Sam and age of 18.
And how about a favorite color.
Of green.
So now I can call underscore pic on profile and as the additional arguments into this thing I can list
out the different properties that I want to pull out of this profile object so I can say name like so
and you'll see that on a top right hand side I now get a new object returned.
That has only the name property out of profile.
This does not actually modify the profile object if I printout profile as well.
You'll see that profile itself is completely unchanged.
So profile creates a new object with de-listed properties.
So I could add on a third argument here of age and now I get name of Sam an age of 18.
So again we're doing the same exact thing inside of our form for our initial values right here we are
just picking out the form values that we care about and that we want to actually edit inside that form.
All right so I think that we probably get a good idea of what's going on here with the initial values.
Now let's take a quick pause.
When we come back the next section we're going to wrap up all this stream at stuff by making sure that
our Samit callback right here comes the appropriate action at Kreator to actually edit and update our
stream.
So quick pause and I'll see you in just a minute.