Now you've got a working back and endpoint to return our list of surveys.
We're going to start wiring up our front end application.
Now as we start to integrate this into the front end this is a pretty basic use of redux and react.
So we're going to go through this pretty quickly without you know any particular order.
We're just going to start the actual creator we'll make our type.
We'll put a producer together and all that kind of good stuff.
So let's get to it.
I'm going to first start off by finding my client directory.
I'm going to open up my SIRC directory and then open up our actions folder inside of here.
We'll start off by first making a new type of type fetch service or something like that.
I don't know let's say export cons let's call it fetch surveys.
That definitely follows our existing nomenclature here.
So say Fetch surveys like so.
OK.
So here is our new type.
So we're going to create an action creator that will make our network request the backend it will get
the list of surveys iller return in action or dispatch in action we should say of type fecche users
and then it will be up to us to create a new reducer to catch the data that is being captured by the
request.
So we'll now open up our actions index not file and put together our action creator at the top.
First import our type of fetch surveys and then scroll down to the bottom of the file where we will
make our new action creator.
So Dan here will say export Konst fetch surveys.
Now this is definitely going to be an asynchronous action creator.
So it's going to have a very similar signature to the ones we've already put together.
I don't expect this action creator to need any arguments since we're just saying hey give me a list
of all of our surveys without any real type of search criteria in there.
So we'll put down our first arrow function which will turn an asynchronous function and then inside
of here we're going to place our logic to actually fetch all the surveys from our backend.
So say Konst response or wait Actio Scott get slash API slash surveys.
Then we'll dispatch our action of type fetch surveys and we'll give it a payload of the list of surveys
that we've just got back from this request right here.
So payload of Rez data.
So the payload will be an array that contains all the different surveys that our current user has made.
OK.
So I think that's pretty much it for action creator.
Definitely not that bad.
So let's now create our reducer and the reducers sole purpose is going to be to watch for this type
right here and return the list of surveys.
So inside my reducers directory I'm going to make a new file called surveys reducer.
We'll start off by importing our fetch surveys type let's say import batch surveys from up one directory
into actions types.
Now do remember that our types file exports many different types.
So we need to use the curly braces here to capture the very specific type that we want to get out of
there.
All right now we can create an export reducer.
So here's what it looks like inside of our author douceur Yep usual boilerplate for reducer.
Nothing too crazy.
So we'll say export default function.
We're going to have a first argument of our state object and a second of the action.
Now we want to make sure that we default our state object that is being produced by this reducer.
And so since this reducers should always be returning a list of surveys I think that will say that by
default this reduce or return an empty array.
So when the application first puts up our surveys piece of state will be an empty array.
And then once we finish the request to get our list of surveys it will then be the fully populated array
with all the surveys in it.
Now we can do our switch statement over action type and we'll say that when action type is equal to
match surveys pretty straightforward chust turn action dot payload and it will also handle the default
case with the return of state.
OK so here's our producer looking pretty good.
Last thing we have to take care of is going to be wiring this reducer up to our combined reducers call
inside of the reducers index J.S. file.
So pop that thing open will import our survey reducer from survey reducer and then we will assign it
inside of our combined reducers call.
I make sure I get a comma after our form line.
Now I will say that the surveys piece of state will be produced by the survey reducer and you and I
before we write that out I just realized we made a small typo here.
We called the file surveys reducer.
But in this import saving right here is said to survey.
So we want specifically surveys plural.
So make sure surveys and surveys.
OK.
So surveys reducer.
All right.
I think that's pretty much it.
So at this point we have really wired up the redux side of fetching all these surveys.
Let's now take a quick break.
When we come back in the next section we'll make sure that whenever the dashboard component is shown
on the screen it attempts to load up the list of surveys by calling this fetch surveys action creator.
So it's take care of that in the next video.
See in just a minute.