Reselect: Question: What's the correct way to fetch a yet un-available piece of state?

[Dev-Dipesh]

Let say we have a few groups:

Example:

[{
  "_id" : "5af37f93b0eb083c13a4c2d0",
  "name" : "Group A",
  "desc" : "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
  "isArchived" : false
}, {
  "_id" : "5af37fa2b0eb083c13a4c2dd",
  "name" : "Group B",
  "desc" : "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
  "isArchived" : false
}, {
  "_id" : "5af37fa9b0eb083c13a4c2e1",
  "name" : "Group C",
  "desc" : "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "isArchived" : true
}]

and then we have members in each group:

[{
  "_id": "5af37f93b0eb083c13a4c2d0",
  "name": "Group A",
  "desc": "",
  "isArchived": false,
  "members": [{
    "firstName": "Daniel",
    "lastName": "Cordaro",
    "email": "[email protected]",
    "status": true,
  }, {
    "firstName": "Anne",
    "lastName": "Esperitou",
    "email": "[email protected]",
    "status": false
  }, {
    "firstName": "Christina",
    "lastName": "Bradely",
    "email": "[email protected]",
    "status": true
  }]
}, {
  "_id": "5af37fa2b0eb083c13a4c2dd",
  "name": "Group B",
  "desc": "",
  "isArchived": false,
  "members": [{
    "firstName": "Justin",
    "lastName": "Milano",
    "email": "[email protected]",
    "status": true
  }, {
    "firstName": "Joseph",
    "lastName": "Seed",
    "email": "[email protected]",
    "status": true
  }]
}, {
  "_id": "5af37fa9b0eb083c13a4c2e1",
  "name": "Group C",
  "desc": "",
  "isArchived": true,
  "members": [{
    "firstName": "Jacki",
    "lastName": "Wong",
    "email": "[email protected]",
    "status": true
  }, {
    "firstName": "William",
    "lastName": "Smith",
    "email": "[email protected]",
    "status": false
  }]
}]

Now we have a route for listing just the groups:

/groups

Here we simply fetch the groups data from the database and set it in the store in groups node. As in the first JSON object.

Then we have another route for listing all the members grouped by group name*:

/members

As in the second JSON object.

Now my question is, if the user have already visited the /groups route and then visits /members route then I already have the group data to process the members data using reselect.

• [ ] 1. - But what to do in case the user directly visits the /members route first?
• [ ] 2. - Is it right way to fetch the group data from members?
• [ ] 3. - And if I do fetch it, then how to set the group data on group node instead of members node in current store?

This is how I'm currently mapping it:

const mapStateToProps = createStructuredSelector({
  groups: makeSelectGroups(),
  currentUser: makeSelectCurrentUser(),
  user: makeSelectUser(),
  loading: makeSelectLoading(),
  error: makeSelectError(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    fetchCurrentUser: (evt) => dispatch(currentUser()),
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer({ key: 'groups', reducer });
const withSaga = injectSaga({ key: 'groups', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(Groups);

Store

[RusinovAnton]

Not answering the question, sorry.

Its interesting is this a library you're using for reducers and sagas injection - https://github.com/GuillaumeCisco/redux-sagas-injector ?

[Dev-Dipesh]

This is actually bootstrapped from react-boilerplate.

You can find the injector code in this repository:
https://github.com/react-boilerplate/react-boilerplate/tree/master/app/utils