CODEWITHSUNDEEP
redux
Thorsten Westheider
Thorsten Westheider

Reputation: 10932

How to lazy load data in a Redux application?

Let's say I got 

IClientState: {
   firstName: string,
   lastName: string,
   details: IClientDetailsState
}

and let's further assume that retrieving firstName and lastName from a service is cheap, so an action would load all clients in one fel sweep into a parent state

xxxxState: {
   clients: IClientState[],
   ...
}

However, retrieving details for any one client is quite expensive, and they're not exactly needed for display in a list, for instance.

How do I go about this? I was thinking about adding loading and loaded properties to IClientDetailsState and checking for those in a component that requires this data; that component would then fire the action lo load the details if both properties should yield false.

The thing is, this check is rather complex from the component's view and to me that's a warning sign that it isn't supposed to be done this way.

So yeah, how do I handle this the proper way?

Upvotes: 0

Views: 1195

Answers (1)

biofractal
biofractal

Reputation: 19123

I don't think the problem is related to redux, instead I think you need to rethink your state shape.

I would solve the problem by introducing some new types, for example:

IClientBase: {
   firstName: string,
   lastName: string
}

IClientListItem extends IClientBase: {
   index: integer
}

IClientList{
   items: IClientListItem[]
}

IClient extends IClientBase{
   details: IClientDetails
}

Now you can gather a list of cheap IClientListItem and when the user selects an item you can convert it to IClient and inflate with the appropriate client details.

Upvotes: 1

Related Questions