Now that we've got our stream reduced or hooked up it's time to actually give the thing a quick test.
So to test this we're going to wire up an action creator called to our streamlets component any time
our streamlet component is rendered on the screen.
We're going to attempt to fetch a list of all of our different streams so that essentially means that
we're going to call the appropriate action creator from our actions index dodgiest file.
So in this case we probably want to call fetch streams plural.
All right.
So inside my component's directory I'll open up streams and then find a stream list.
Yes.
So at present we just have this functional component at the very top.
I'm going to import the connect helper from re-act redux and I will import my action creator called
fetch.
Where is it.
Oh I lost it.
Here we go fetch stream's.
So I'm going to import fetch streams from up to directory's actions and then we will wire this thing
up at the very bottom.
So I'll do my connect.
We do not yet have a map stage props but we will in just a little bit.
So passing NULL as the first argument and then as a second argument will do fetch stream's inside of
an object like so.
Now again can't see it enough.
Notice the s on.
Here we are fetching multiple streams.
Now in place of the functional component we are going to place a class based component instead.
The reason that we are going to use a class based component is that we want to color action creator
inside of the component.
Did mt life cycle method because we only want to attend to fetch our list of streams.
One time Zaal put class stream lists extends re-act component.
I will put my render method inside of year with the div of stream list more or less like what we had
before.
And then I will define my component.
Did mt life cycle method and inside there we can call this Propst start fetch streams.
And that's pretty much it.
So at this point we're just looking at the actual creator and then use our redux dept tools to see the
actual list of streams appear inside of our reducer or inside of our redux state.
So I going to save this.
I'm going to make sure that my client server is running and my API server is running as well and then
I'll flip back over to my application inside the browser.
I can do a quick refresh here just to make sure the refresh kicked in and then I will open up my redux
dev tools.
Now again make sure that you click on the state button right here.
Usually by default it's going to show you the diff tab.
So I can go over to state.
I can then click on streams and I'll see my two streams that I have created appear right here.
Perfect.
So that's a list of all the streams from our API server.
Notice the structure of the streams piece of state.
This is a object as we've been discussing.
The key of the first object right here is one because the stream ID for that is one as well.
And I see the title and description on there.
Then for the second key value pair of.
Got a key of 2 because it is pointing to the stream with ID 2 and I see all the relevant details for
string number two on there as well.
All right so this looks pretty darn good.
Let's take a quick pause right here.
When we come back the next section we're going to start to put together a better render method for the
stream list and make sure that it looks a little bit more like the mockup So we took a look at previously.
So quick posin I'll see you in just a minute.