Search⌘ K
Home
Courses
Practical Redux

Handling Selection Logic

Explore how to add selection logic in a Redux app to track and toggle the currently selected items. Understand writing reducers to handle selecting and deselecting entries, connect state and actions to UI components, and manage highlighting and details display based on user interaction. This lesson helps you build interactive lists with clean state management.

We'll cover the following...

We’re almost done with this set of changes. The last thing to add for now is the ability for the user to click on either of the lists and select the item that was clicked on. Right now, we’re just defaulting to using the first item in an array as the “current” item for display in the Details sections.

We’ll start with the Pilots list. We don’t have a reducer for anything pilot-related yet, so we’ll create one. Going along with the idea of “normalization”, all we need to store is the ID of the currently selected pilot. We’ll actually get a bit fancy with the reducer logic, and handle de-selecting the current item entirely if the user clicks on it again:

Commit 593e570: Add logic for tracking the currently selected pilot

features/pilots/pilotsReducer.js

import {createReducer} from "common/utils/reducerUtils";

import {PILOT_SELECT} from "./pilotsConstants";

const initialState = {
    currentPilot : null
};

export function
...