Connecting List Components
We'll cover the following...
Picking up where we left off, we can see that each of our main “panel” components are connected to Redux, as well as the TabBar component. However, none of the components within those panels are directly connected. Instead, we’re passing data and action creators down as props from each panel to its children. It’s perfectly fine to only have a few connected components, but as an app grows, this can become a pain point.
The Redux FAQ covers this topic in the question “Should I only connect my top component, or can I connect multiple components in my tree?”. Quoting the answer:
The current suggested best practice is to categorize your components as “presentational” or “container” components, and extract a connected container component wherever it makes sense:
Emphasizing “one container component at the top” in Redux examples was a mistake. Don’t take this as a maxim. Try to keep your presentation components separate. Create container components by connecting them when it’s convenient. Whenever you feel like you’re duplicating code in parent components to provide data for same kinds of children, time to extract a container. Generally as soon as you feel a parent knows too much about “personal” data or actions of its children, time to extract a container.
In fact, benchmarks have shown that more connected components generally leads to better performance than fewer connected components. In general, try to find a balance between understandable data flow and areas of responsibility with your components.
Following this idea, our next step will be to connect more individual components at a finer-grained level of detail.
Connecting the PilotDetails Component
We’ll start with the <PilotDetails> component. Right now, the <Pilots> component is retrieving a list of all Pilot objects in its mapState function, plus the currentPilot ID value. Then, when it renders, it does a lookup to find which Pilot entry matches the selected ID, and passes that object to <PilotDetails>. We can connect <PilotDetails> directly, and remove that logic from <Pilots>.
This is a straightforward transformation. We’ll add a mapState function to ...