Search code examples
javascriptreactjsreduxreact-reduxstore

How to import only ONE user out of many based on the route params?

my store: 

store={
  users: [
    {id:1},
    {id:2},
    {id:3}
  ]
}

Now, I want to import only one of the users based on the route params eg.

id = this.props.match.params.user_id;

The question is.. How to establish the id variable above before the mapStateToProps function fetches the data from my store? My mapStateToProps: 

return {
  singleUser: state.users[id]
};

Returns undefined. I tried placing the variable 'id' inside the mapStateToProps but I THINK the params aren't established by the time it starts fetching data.

EDIT: Also, I can't establish the id variable in mapStateToProps because this.props is undefined outside of the component.. how would i go about that?

Solution

  • You can use the array method find to get the object with the matching id.

    return {
  singleUser: state.users.find(user => user.id === id)
};