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](http://redux.js.org/docs/FAQ.html) covers this topic in the question ["Should I only connect my top component, or can I connect multiple components in my tree?"](http://redux.js.org/docs/faq/ReactRedux.html#react-multiple-components). 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 `` component. Right now, the `` 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 ``. We can connect `` directly, and remove that logic from ``. This is a straightforward transformation. We'll add a `mapState` function to ``, look up the right Pilot object by ID if available, and return that entry. While we're at it, we'll also tweak the input components to be disabled, so that the user knows they can't actually interact with them. > **[Commit 9fbb8b9: Update PilotDetails to be connected](https://github.com/markerikson/project-minimek-educative/commit/9fbb8b977156bddb3755f8d4019da73a167b8808)** **[features/pilots/PilotDetails.jsx](https://github.com/markerikson/project-minimek-educative/blob/9fbb8b977156bddb3755f8d4019da73a167b8808/src/features/pilots/PilotDetails.jsx)** ```diff import React from "react"; +import {connect} from "react-redux"; import {Form, Dropdown} from "semantic-ui-react"; +import orm from "app/orm"; +import {selectCurrentPilot} from "./pilotsSelectors"; +const mapState = (state) => { + let pilot; + + const currentPilot = selectCurrentPilot(state); + + const session = orm.session(state.entities); + const {Pilot} = session; + + if(Pilot.hasId(currentPilot)) { + pilot = Pilot.withId(currentPilot).ref; + } + + return {pilot} +} // Omit component code for space -export default PilotDetails; +export default connect(mapState)(PilotDetails); ``` **[features/pilots/Pilots.jsx](https://github.com/markerikson/project-minimek-educative/blob/9fbb8b977156bddb3755f8d4019da73a167b8808/src/features/pilots/Pilots.jsx)** ```diff render() { const {pilots = [], selectPilot, currentPilot} = this.props; - const currentPilotEntry = pilots.find(pilot => pilot.id === currentPilot) || {} // Omit irrelevant rendering code - + ``` The `mapState` connection replaces the logic we had in ``. # Connecting the PilotsList Component Next up is the `` component. The `` component currently extracts the actual Pilot objects from the store, passes them as an array to ``, and then each individual plain Pilot object is passed as a prop to the "presentational" list items. We _could_ just move the current `mapState` logic from `` to `` and leave it at that, but instead, we're going to implement **one of the most useful Redux techniques: a connected list that passes item IDs to connected list items**. Let's look at the implementation, then discuss some of the details of the specific approach we're using. The `mapState` for `` will need to return an array of IDs for all Pilot entries. `` will then render its list of `` components, and pass the appropriate pilot ID into each list item. Either the list or the list item will need to determine if that list item is currently selected. There's valid arguments either way, but since we're already passing a `selected` flag into each list item, we'll leave that in place. > **[Commit 871a01f: Update PilotsList to be connected](https://github.com/markerikson/project-minimek-educative/commit/871a01ff4513a549127684345627074e02629e00)** **[features/pilots/PilotsList/PilotsList.jsx](https://github.com/markerikson/project-minimek-educative/blob/871a01ff4513a549127684345627074e02629e00/src/features/pilots/PilotsList/PilotsList.jsx)** ```diff +import {selectPilot} from "../pilotsActions"; +import {selectCurrentPilot} from "../pilotsSelectors"; + + +const mapState = (state) => { + const session = orm.session(state.entities); + const {Pilot} = session; + + // Extract a list of IDs for each Pilot entry + const pilots = Pilot.all().toModelArray().map(pilotModel => pilotModel.getId()); + + const currentPilot = selectCurrentPilot(state); + + // Return the list of pilot IDs and the current pilot ID as props + return {pilots, currentPilot}; +} + +// Make an object full of action creators that can be passed to connect +// and bound up, instead of writing a separate mapDispatch function +const actions = { + selectPilot, +}; + export class PilotsList extends Component { render() { - const {pilots, onPilotClicked, currentPilot} = this.props; + const {pilots = [], selectPilot, currentPilot} = this.props; - const pilotRows = pilots.map(pilot => ( + const pilotRows = pilots.map(pilotID => ( )); ``` The `Model.getId()` method is useful if you don't happen to know the exact name of the ID field for a model type. Maybe it's actually `name`, or `guid`, or something else. We can declare the ID field name as part of the model declaration, and the `getId()` method will use that to look up the right field when asked. There's a few other ways we could come up with the list of Pilot IDs. Since we _do_ know the ID field name in the plain Pilot objects, we could do `Pilots.all().toRefArray().map(pilot => pilot.id)`. Or, if we wanted to bypass using Redux-ORM's API, we could directly access the `state.entities.Pilot.items` array, where Redux-ORM keeps a list of all Pilot IDs in the state. **[pilots/PilotsList/PilotsListRow.jsx](https://github.com/markerikson/project-minimek-educative/blob/871a01ff4513a549127684345627074e02629e00/src/features/pilots/PilotsList/PilotsListRow.jsx)** ```diff +const mapState = (state, ownProps) => { + const session = orm.session(state.entities); + const {Pilot} = session; + + let pilot; + + if(Pilot.hasId(ownProps.pilotID)) { + const pilotModel = Pilot.withId(ownProps.pilotID); + + // Access the underlying plain JS object using the "ref" field, + // and make a shallow copy of it + pilot = { + ...pilotModel.ref + }; + + // We want to look up pilotModel.mech.mechType. Just in case the + // relational fields are null, we'll do a couple safety checks as we go. + + // Look up the associated Mech instance using the foreign-key + // field that we defined in the Pilot Model class + const {mech} = pilotModel; + + // If there actually is an associated mech, include the + // mech type's ID as a field in the data passed to the component + if(mech && mech.type) { + pilot.mechType = mech.type.id; + } + } + + return {pilot}; +} ``` For ``, we just copy over the lookup logic we had in ``, except that now we're only looking up one entry instead of all of them. Also, we're using the `pilotID` prop that the `` parent component is passing down. The connected wrapper component for `` makes all passed-in props available to `mapState` if we declare that `mapState` takes two arguments. By convention, the second argument is referred to as `ownProps`. Note that when `mapState` is declared to take two arguments, it will be called more often. This is in case a change of passed-in props would result in a change to the values returned from `mapState`. **[features/pilots/Pilots/Pilots.jsx](https://github.com/markerikson/project-minimek-educative/blob/871a01ff4513a549127684345627074e02629e00/src/features/pilots/Pilots.jsx)** ```diff - // Delete the existing mapState function entirely -export class Pilots extends Component { +export default class Pilots extends Component { render() { - const {pilots = [], selectPilot, currentPilot} = this.props; return (

Pilot List

- + // Omit other rendering logic -export default connect(mapState, actions)(Pilots); ``` With those changes in place, the `` component is no longer connected, and is actually now back to being entirely presentational. It renders several layout-related components, and two connected containers: `` and ``. # Connecting the Mechs Components We'll wrap up this section by applying the same sets of changes to the various components in the "Mechs" panel as well. > **[Commit 44f5150: Update MechDetails to be connected](https://github.com/markerikson/project-minimek-educative/commit/44f51509ab75cafb385d2e1fb9ac681fbe29bd2f)** > **[Commit 931e4dc: Update MechsList to be connected](https://github.com/markerikson/project-minimek-educative/commit/931e4dce300d310caf3b4928004aaf5947202e30)**

Connecting List Components