Now that we are saving some number of employees to firebase we can start to ramp up our employee list
component and make sure that they can actually display a list of employees to our users.
So we'll open up our employee lists component.
Right now it's just got some scaffolding in here just something to show the hard coded employee list
text over and over again.
So we're going to want to freshen up this component a little bit to show a list of employees to the
user.
The other thing you have to think about is we have to somehow load our list of employees right like
we're not actually loading any employees right now.
We can create them but we can't actually fetch them just yet.
So maybe the best place to start would be to figure out a way to fetch the list of employees make sure
we can actually fetch them you know get them in our application state and then work on employee list
a little bit more to make sure that it shows nicely formatted and nice looking list.
So I think that'll be our plan of action.
We will first make an action creator to fetch our list of employees we will add a new producer to store
that list of employees and we'll come back to employee list and make sure that we can actually render
that list of employees.
So that's me our plan.
Let's get started first with our action creator.
We're going to add the action creator for fetching the list of employees into employee auctions because
this is our file that has to do with everything related to working with employees.
So we'll create a new action create in here call it employees fetch us that now there you go so inside
of here we need to somehow reach out to firebase grab our list of employees and you know just fetch
them dispatch in action.
This is again going to be an asynchronous action because we have to make some type of request to fetch
our data.
That means that we'll definitely want to be using redux down here as well.
So inside of our action creator we will return a fat arrow function that gets called with the dispatch
method.
Now here comes the fun part again.
Remember how we work with our firebase data.
We create a ref to a very particular spot in our Jaison database just like we did up here inside of
the employee create method by creating a ref.
We can then work with the data located at that path.
So we are currently saving all of our employees to users slash current user id slash employees.
That means we can make another reference to the same location but this time tell firebase that we want
to fetch data from that location rather than pushing a new record in there.
So inside of our employees fetch method were going to create the same ref again fire based database
ref and then we're going to use string interpolation again.
So I'm going to use back ticks again.
Users current user id employees.
Now we do need access to the current user.
So we will get access to the current user again with Oops I keep on hit that caps lock will pull the
current user property off of firebase start off.
So now current user is the user who is currently logged into our application.
Now we have a ref to this location inside of firebase but this time around we want to fetch data out
of here we want to pull some amount of data so fetching the data at a syntax doesn't look maybe doesn't
quite look like what you would expect.
OK it's a little bit strange.
Let's go through it nice and slow though on my firebase Raphe I'm going to chain on a dot on a past
and the first argument of value and then a second argument of a snap shot like so and then that's going
to be a factor function.
So the federal function is going to be called with this snapshot object right here.
You can read this entire statement right here is saying something like.
Any time any data comes across from this ref or this bucket of data.
So any time we get any value any data call this function right here this federal function with an object
to describe the data that's sitting in there.
And that's the snapshot right thing.
So the snapshot variable here it's a little bit misleading.
You might expect this to be like an array of all the different employees that we have inside our application
but it is an object that describes what data is in there.
So it is not the array of employees that is an object that we can use to get a handle on those employees.
Let's see how we actually use it.
So whenever we get some amount of new data from this ref right here we will dispatch an action.
We'll give it a type of employees fetch success and a payload of snapshot value.
So this snapshot right here this is the magic.
This is how we actually get access to the data that is out this ref right here.
So again snapshot is not the actual data.
It is an object that describes the data that we could get access to.
So if you want to get the actual employees that are located there we have to call snapshot Val.
Little little bit misleading I think doesn't quite follow a lot of you know trends of other libraries.
But the reasoning behind using snapshot right here is that it gives you a lot of other fantastic data.
Kind of like middle level data about what Jaison is sitting at that point right there.
All right.
So we are now creating RF.
Any time we get any data from this thing we're going to dispatch a type in action.
One thing that I want to point out right here is that this on value action creator it is persistent
so to speak.
So if we call employees fetch one time just like one time it will immediately start up this event handler
right here.
And for the life of the rest of our application it will call this federal function.
Any time any new data comes across.
So this is kind of where firebase and redux they kind of work together pretty well because we can just
set up this thing right here to watch for some amount of new data.
And then at any point in our applications lifecycle any time that there's any new value that comes across
we will immediately automatically I should say we will automatically dispatch an action of type employees
fetch success with the new data in there and so skinny really valuable for that employee.
Going from employee create back to employee list because when we call employee create we make the new
employee firebase will automatically detect that we added a new employee.
It will dispatch an action automatically and our data will instantly show up inside the employee list
without us actually having to do anything.
So pretty nice in that regard.
Now the last thing we have to do is make sure that we create this typewrite your employees fetch success.
So at the very top we will add on the new type employee such success
and a guinea.
There.
I must have a typo.
Employees that success.
This is a little bit annoying here.
I've got employee Cingular and other locations.
But in this location here I've got employees.
It's a little bit misleading.
But we are fetching multiple employees so I'm going to stick with employees plural like so just make
sure whatever you go with just make sure that you are have the same type either employee or employees
in both locations.
And don't forget we actually help out.
We also have to add this to our type file.
So let us open up the type file export Konst employees fetch success
looks good.
Let's continue in the next section where we are going to create a new reducer that's going to catch
this action right here of employees fetch success