Redux - dispatch async action when selector fails - reactjs

Question

I have the following connected component:
const selectFullNameById = (state, id) =>
{
const user = state.domain.people.values.find(u => u.id === id)
return `${user.lastName} ${user.firstName}`
}
const mapStateToProps = (state, ownProps) => {
const files = ownProps.files.map(f => ({
...f,
fullName: selectFullNameById(state, f.creatorId)
}))
return {
...ownProps,
files
}
}
export default connect(mapStateToProps)(Uploader)
The connected component receives an array with object literals as a Prop called files. Each object literal has a creatorId value, I want to pass to my presentational component the full name of this person, so I use a selector "selectFullNameById", to get these values. This works when this person is actually available in the global state.
But it could be that this person object literal is not yet present in the global state, and so a fetch should be done to the server to check what his name is. So I have an async action creator to do the lookup. But I don't know how to dispatch this from the selector.

Answer 1

I would do the following:
//1. create a default state for a person:
const DEFAULT_PERSON = {
id: -1,
fullName: 'n/a',
…
} //some useful stuff
//2. modify electFullNameById to
const selectFullNameById = (state, id) => {
const user = state.domain.people.values.find(u => u.id === id) || null;
//return default data, if user does not exist
return (user === null) ?
Object.assign({}, DEFAULT_PERSON).fullName :
`${user.lastName} ${user.firstName}`
}
//3. refactor mapStateToProps to:
const mapStateToProps = (state, ownProps) => {
const files = ownProps.files.map(f => ({
...f,
fullName: selectFullNameById(state, f.creatorId)
}))
//no need to add the ownProps here
return { files }
}
So the basic Idea is: Create some useful default data, which is used in case the user is not found. This way, you wont get any »undefined« error on the following usage of the data.
To dispatch an async action if a user if undefined can be added like so (assuming you are using redux thunk and fetch):
const loadUser = uid => dispatch => fetch(`${url}/${uid}`)
.then(response => response.json())
.then(json => dispatch({
type: 'user/loaded',
payload: { user: json }
}));
const YourComponent = ({ users, loadUser}) => {
return (
<div>
{
user.map(user => {
if (!user loaded) loadUser(user.id);
return (<some>html based on default data</html>)
})
}
</div>
);
}
You can dispatch the action right at rendering time since this action is async and so the re-rendering of the component wont be called right away, what would lead to recursion. If there are many users which have to be loaded it might be a good idea to filter them out and load them at once.