We've now got our employee data we've got it available on our state as state DOT employees and that's
going to be an object continue all the different employees.
So it's time to put together a list view.
We've done this before.
So we go through the implementation somewhat quickly.
I'm inside of my employee list component.
And for a list view remember we have to make a data source object and that data source object is going
to require us to give it a method to say here's how you render an individual row.
So again we've done this before.
We're going to be doing the same exact thing again.
First thing we'll do is up at Riak native will import the list view component.
Then we can create a new data source inside of our component will mount right here.
Now we haven't wired up the reducer to this component just yet.
Right.
So we're not receiving that list of employees in here just yet but we can imagine that we will have
something like this doc prob start employees for a list of employees right.
That does make sense.
So let's put together our code for creating our data source say Constance and this is all that data
source stuff.
When we add in a row has changed.
This is what detects whether or not or is the order in which all the records are to be added in here
and then will assign our data source which is going to the source of data for the list.
So D.S. dot clone with Rose this stopped prop's DOT employees.
Now there's just a little something a little bit funny about the coding here that we've got right now.
Let's let's take a look at it.
When the component is about to be rendered to our device this component will mount will be called and
we immediately tell our action creator to go fetch our list of employees.
So the first Sansing is run into the device.
We will definitely have no employees available right like no employees have been loaded up yet.
So as soon as we hit this action creator we go to fetch the employees which is an asynchronous request.
So it takes like some number of milliseconds or some other seconds to go and fetch that list of employees.
But then the very next line of code the very next instance we immediately tried to make access or make
use of this start state employees which I'm going to expect like is me extremely likely that this Propst
employees will be empty by the time we get to this line of code right here because our actual request
to fetch a list of employees is probably not going to be complete just yet.
So because of this problem I'm going to suggest we do a little bit of a factor.
I want you remember how redux works.
OK.
Remember that any time any piece of state updates the connect helper at the bottom will rerun map stage
props and our component is going to get some new number of props right like we pull off of our state
object.
So even though our component might not immediately have some value in this Propst out employees it eventually
will like Eventually we're gonna get that list of data.
Now we can get a handle on that value by adding in another lifecycle method called component will receive
prompts.
This is another lifecycle method that will be called whenever we are about to receive a new set of props
to rerun for the component with.
So inside of here we can again recreate our data source assuming that well this time around we probably
have access to our employees.
What's really interesting about this component will receive prop's lifecycle methodis is that it gets
called with the new set of props that the company is about to be fed and it's captured as the first
argument to the method.
So it will be called with something that we by convention call next prompts.
So inside of here next prop's let's just throw down a comment for it are the next set of props that
this component will be rendered with.
And then this dark props is still the old set of props.
So we get access to both set of props inside of component will receive props.
It's a nice little method for like reacting to any change in your props object.
So we can move all of this creation code for creating our data source into this thing and that might
seem like a very obvious step here.
I might seem like a very obvious strategy however.
Well you know maybe that's not entirely the right solution.
I want to think about one particular use case or one particular like flow threat or application.
Let's assume that the user logs into our application we show the employee list component.
As soon as we show it we load up our list of employees.
Ok so like we lurk list employees eventually they get loaded and then we call component will receive
prompts.
So if we add all this code down in here that will be that will accommodate that solution right or that
flow.
But what would then happen if the user navigates over to like the employee creation forum.
Right.
This component will be unmounted so will not be shown anymore that the user goes over to employee create
they create their new employee and then they come back to employee list when the user goes to employee
create this component.
It gets tossed out the window it's gone.
It gets thrown away gets garbage when these are not navigates back here they're going to be rendering
a new instance of employee list.
So we will hit our component will amount we'll call the action creator again.
But you know what.
Like we will fetch the new list of data which is OK but remember we already have loaded up all of our
employees and they're still sitting in our global state object.
So even though we could move all this code down into component will receive props.
It was actually going to kind of benefit us if we make sure that we tried to build our data source both
when the component first loads up and when it receives new prompts So the solution that we're gonna
go for here is going to add another helper method in here called create data source and then I'm going
to expect this thing to be called with a prop's object.
So like some props whether it be next props or this art props whatever might be.
So I expect that props object to have a R or a property of employees.
So I'm going to structure it out of the arguments object and then inside of here I'm going to take all
this list building stuff and I'm going to do it inside of create data source.
Then instead of referencing this doc Propst on employees I can reference just employees.
So now the end result of all of this is that inside of my component will mount I can call this dot create
data source with this dark props and inside of my lifecycle method I can call this dot create loops
create data source with next prompts.
So no matter where I'm coming to this component from it doesn't matter.
No matter what I will always be attempting to create my data source which is exactly the behavior I
want to have.
The last thing I want to point out here I'm going to ask you to please please please double check your
spelling on component will receive prompts to make sure you've got a lower case i in here.
And remember I before E except after c so c v e prompts.
OK I think that our data source is now going to be built up correctly.
Let's continue working on our list in the next section