In the last video we learned about a little bit of new syntax so we can use to dynamically out in new
key value pairs to an object so that we understand all the syntax we're going to start to work on our
real stream reducer to get started.
I'm going to delete this temporary file I created.
I'll then find my reducers directory.
And inside there I'll make a new file called stream reducer.
Yes.
And then inside if your will first begin by importing our actions file or some of the action types file.
So I'm going to import a couple of different types from up one directory actions types.
Now we're going to get a couple of different types like I said we're going to want to handle all these
different stream types.
So create stream.
Fetch.
Fetch streams delete stream and stream as well.
So I'm going to import each of those.
So I'll do a fetch stream.
I'll do a fetch stream's create stream edit stream and delete stream as well.
Then after that I'll add in some boilerplate for a reducer.
So I'm going to export default state which we defaulted to be an empty object.
I'll receive my action and then inside appear we will set up our switch statement so I can switch over
action type and I'll set up my default case with return state right away.
OK so now we want to set up separate case statements to handle each of these different types.
Right here now as a quick reminder each of those different types maps up to a different response we
get back from our API.
So in other words when we see an action with the type of fetch streams specifically with the US that
means that we are getting back an array of records and we are going to want to take that array of records
and merge them all into our state object.
In the case of getting a single record.
So that would be the type of fat stream where in the case of creating a record or updating a record
so that would be create an edit right here.
We are getting back single records so we're going to want to take those single records and merge them
into our redux.
Or just me.
Our state object as well.
And then finally in the case of deleting a record we get back nothing from the API.
And in that case we want to find the appropriate ID inside of our object and remove that key value pair.
So essentially at the end of the day all I'm really saying here is is that we're going to be following
the same kind of conventions around updating and working with an object that we spoke about previously
and side of or sets foot back over the first case we're going to handle is fetch stream singular.
So just one stream.
So I will add in a new case of fetch Stream.
Now again notice there is no s on here we are doing singular fette stream.
So in this case I want to take my entire state object I want to create a new object and take everything
out the existing one and add it in like so.
So again this is what is going to satisfy.
Redux is requirement of always returning a new object.
Then the string that we actually want to add in is going to be on the action payload property.
So we want to make sure that we designate an ID from that action payload as our key and the value will
be the actual stream itself.
So I would use that new syntax.
We just spoke about in the last video.
So put in my square brackets action payload ID and then I'm going to assign that a value of action.
Payload like so.
So take a look at what is happening here.
Anytime that we get a action with tight fed Stream we're going to take our state object take all the
properties or all the key value pairs out of it and add it to the new object.
And then we're going to dynamically add a new key value pair on the fly.
It's going to have a key of the streams ID and a value of the actual stream itself.
And that's pretty much it.
That's all the code we have to write for handling getting a news stream.
So let's now do the same thing for creating a stream.
Remember when we create a stream the response we get back from our API is again going to be a single
record.
So we want to take that single record and add it into our state object.
So I would write out something like this.
I would say case create stream I will return a empty object with dot dot dot state.
And again I will take out of that action Palit property.
The idea of the string that was just created so action payload ID and assign it a value of action payload
and so you'll notice.
Yeah.
They end up being identical because we're just taking whatever payload is inside there and adding it
as a new key value pair on our state object.
So now let's do the same thing for editing or updating a record as well.
So again we get back a single record from our API and I want to take that single record in added into
our state object.
So I can do a case edit stream and it's going to have the same syntax we just saw a moment ago.
So I do return new object dot dot dot state square bracket action.
Payload Id close off the square brackets to get the colon and then action dot payload.
Yup totally identical in all three cases.
So in all three cases we are getting back a single record from our API.
We want to take that record and add it into our state object.
So it ends up being identical for fetching a single stream creating a stream and editing a stream as
well.
OK so this looks pretty great.
Now when we add in a bunch of different records at a in a single go or when we delete a record the syntax
or the steps that we're going to use is just going to be a little bit different.
So let's take a pause right here and we'll figure out how we are going to delete a record and add in
a bunch of records to our state object in a single line of code.
So quick poznań see you in just a minute.