Combine nested result using selectors

Question

I am using reselect to derive my data from the store. I maintain a list of Divisions and Teams and each Division has it's list of teams. I also keep a record of the active Divisions and keep them in an array activeIds .

Basically I have this tree structure:

const divisions = {
  activeIds: [], // this contains the selected division IDs
  list: {
      1: {
        name: 'Division 1',
        teams: [1,2,3]
      }
      2: {
        name: 'Division 2',
        teams: [4,5,6]
      }
      // and so on...
  }
}

const teams = {
  1: { name: 'Team 1' }
  // and so on...
}

I have a getActiveDivisions selector which iterates through the activeIds array and hydrate it with Division data, and the result is:

// if activeIds contain [1,3]

const activeDivisions = {
  1: {
    name: 'Division 1', 
    teams: [1,2,3]
  }
  3: {
    name: 'Division 3',
    teams: [7,8,9]
  }
}

Now I wanted to create a getActiveDivisionsWithTeams selector which basically gets the same structure as the activeDivisions tree however with hydrated teams, for example:

const activeDivisionsWithTeams = {
  1: {
    name: 'Division 1', 
    teams: {
      1: { name: 'Team 1' },
      2: { name: 'Team 2' },
      3: { name: 'Team 3' }
    }
  }
  // and so on...
}

Or should I just keep a different list for the division with hydrated teams?

// Notice there is no `name` on division entry
const activeDivisionsWithTeams = {
  1: {
    teams: {
      1: { name: 'Team 1' },
      2: { name: 'Team 2' },
      3: { name: 'Team 3' }
    }
  }
  // and so on...
}

Or what would be the best way to approach this scenario?

Answer 1

I don't think it's good practice to fully rehydrate your data.

If you're going to display something for all the teams, pass each id on to a child component, which can then use a selector to get the data it needs.

Or if you're doing some calculation which needs disparate parts of the data, then do this inside the selector, rather than return the fully hydrated data.