In class video we put together a bunch of different action creators inside of our actions index j s
file.
We did this all in one go just so we didn't have to come back over to this file nonstop throughout the
rest of this application and talk about like the next action creator we had to put together.
Now we're going to take a very similar approach for putting together our reduce or as well.
We're going to start to work on our stream reducer inside this video and we're just going to put the
entire seducer together in one go as opposed to having me kind of spread putting the reducer together
around a couple of different videos throughout the rest of the application.
Now for the producer we're going to put together we're going to do things just a little bit differently
than we have in the past.
So let me show you a couple of diagrams to help you understand exactly what I mean by differently.
All right.
So this right here is a diagram of more or less how we have been creating reducers throughout this course.
Any time that we had a list of records that we wanted to maintain so we could as an option we could
totally have a stream's producer that always returns an array of stream objects.
So each of these little boxes right here represent a separate stream that has been created by a user.
Remember that every stream object is going to have a title and a description assigned by the user.
And it's also going to have an id property and that ID is going to be assigned by that API.
So if we wanted to follow the same convention as we've seen throughout the course we could return an
array that has a list of all these stream objects inside of it.
Like I said this time around we're going to do things a little bit differently.
And the reason that we're going to do this differently is that it's going to make many different operations
around maintaining an array much easier than if we had a array.
OK.
So here's what we're going to do instead.
So we are still going to have a stream producer.
It's going to behave as a reduce or it usually would.
So we're going to add it to the combined reducers call.
But rather than returning an array of streams it is going to return an object that has all the streams
inside of it.
So we're going to return an object instead of an array inside a subject we're going to have a collection
of key value pairs as you would expect inside of an object.
The key for each of these key value pairs is going to be the ID of a stream.
So let's say right here if we had a key of one the value for that would be the stream that has an idea
of 1.
If we have a key of 22 the value b the stream with ID 22 and if we had a key of 37 the value would be
the stream with ID 37.
So in order to kind of access any given stream inside this object we would just have to reference our
streams piece of states out of our redux store and then essentially try to access the appropriate ID
inside there.
And that will give us the stream that we're looking for now besides making accessing records a little
bit easier.
Also modifying or updating data from our streams reducer will be a lot easier as well.
So we looked at this chart right here a while ago.
Now I want you to recall that one of the steps that we looked at was how we replace an element in an
array.
So this case right here of replacing an element in an array would be applied any time that we called
our action creator of edits Stream right here.
So whenever we call edit Stream we are attempting to update a stream on our API.
So we make the request to update the stream.
We then get the updated stream back as the response from the API and then we're going to dispatch an
action of type at it Stream right here with our payload that has the stream inside of it.
And so when we got back this updated stream we would probably want to find the original stream with
the identical ID inside a very douceur and removed the old version of the stream and put in the new
version right here.
So if we wanted to do that with an array based approach we would have to write out some code like you
see right here.
We would have to map over all of our different stream records inside of the reducer.
We would have to find the Stream but the idea that we cared about and then returned the newly updated
stream but if we were making use of a object from Ari douceur the updating process would be much more
straightforward.
We would put down the curly braces to indicate a new object.
We would take all the records out of our old state object and add them in and then we would add in a
new key value pair.
But in this case the key would be the ID of the stream that we just updated.
So let's say if we updated stream with ID 65 we would put in a key of 65 and then the value would be
stream with the ID is 65.
So basically the syntax here of updating our state is going to be so much easier when we are making
use of an object instead of an array.
Now to make this really kind of sink in and help you really understand this I want to write out a little
bit of sample code.
So I want to write out a little sample code to show you how we would update a record inside of an array
if we were using the array based approach and then do the same thing with an object as well.
And you're going to very quickly see that.
Yup.
If we use an object to store all of our records life is going to be much easier.
So I'm going to flip back over to my editor and I'm going to open up a brand new file.
I'm not going to save this file.
This is just some sample code.
So you do not have to write this out.
I just want to very quickly show you how much code we have to write out to update records when we are
making use of an array inside of a reducer All right I'm going to first do the array based approach
so I would have something like stream reducer and I'm going to default my state to be an empty array
because that's the kind of case that we're going to look out for right now.
And then I would switch over my action type I would have a case inside of your of it stream because
it's the only case I want to show you very quickly I'm going to put the default on here just to be complete.
So then inside of here if we fell into the edit stream case chances are our action object right here
would have a payload of the newly updated stream that just came over from our API so we would then need
to look through our state array right here find the old stream with the same ID remove it and replace
it with the new stream and see that action object.
So to do so we would end up with something it looks like this.
I would return States on map.
I would iterate over every string that I have inside of my state array and then I would say something
like if the old stream ID is equal to action payload ID search number x not Paillard right here.
That is the new stream that just came back from our API.
So if the stream that I am iterating over has an ID equal to the stream that was just updated I want
to return the new stream and not the old one.
So I would put in return action payload and then I would also have to handle the else case here.
So if it was not the stream I was looking for I would just return the stream itself.
OK so that is a producer right there that is going to use an array based approach.
And this is how much code we have to write just to find the appropriate record inside of that array
and then replace it.
So this is handling the audit stream case.
So lets take a quick pause right here.
When we come back the next video I'm going to show you the same example but we're going to use an object
based approach instead.
And you're going to very quickly see that it requires way way way less code to update records inside
an object as opposed to this array approach.
So let's take a quick pause right here.
When we come back the next video I'll show you that quick example.