Gain insights into modern Redux usage with Redux Toolkit and React-Redux hooks. Delve into updated patterns and practices through comprehensive tutorials. Explore and apply contemporary Redux concepts.

Hi, I'm Mark Erikson, also known as @acemarke, and I'm a Redux maintainer

I wrote this course in 2017. Many of the concepts are still relevant, but Redux usage has changed significantly. We now teach Redux Toolkit as the standard approach for writing Redux logic, and React-Redux hooks as the default for components.

I'd recommend reading through the Redux core docs tutorials, which have been rewritten to explain the "modern Redux" patterns we teach today:

https://redux.js.org/tutorials/index

I've made this course free if you'd still like to go through it.

Robin Wieruch

Mark helps people learn Redux almost every day.  I guess he has seen all the challenging questions about it by now. So if you are learning Redux, I highly recommend to go with his course, because it comes with all his gathered experiences about the topic

Author of "The Road to Learn React"

Dave Ceddia

Practical Redux is the missing manual for how to use Redux in real-world apps, full of practical ideas on project structure, handling complex data, and best practices. I highly recommended it for anyone using Redux in a real app.

Author of "Learn Pure React"

Gosha Arinich

Mark is _the_ guy when it comes to explaining Redux. The course builds upon (& goes above and beyond) his awesome series of posts on Practical Redux. It’s full of actionable advice that applies to a range of apps… there were a couple of things I myself learned from it, and I’m no stranger to Redux. Definitely a must!

Author of "The Missing Forms Handbook of React"

Practical Redux

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](https://github.com/markerikson/project-minimek-educative/commit/593e57019fe867821d38177e13e73084f8e35162)**

**[features/pilots/pilotsReducer.js](https://github.com/markerikson/project-minimek-educative/blob/593e57019fe867821d38177e13e73084f8e35162/src/features/pilots/pilotsReducer.js)**
```js
import {createReducer} from "common/utils/reducerUtils";

import {PILOT_SELECT} from "./pilotsConstants";

const initialState = {
    currentPilot : null
};

export function selectPilot(state, payload) {
    const prevSelectedPilot = state.currentPilot;
    const newSelectedPilot = payload.currentPilot;

    const isSamePilot = prevSelectedPilot === newSelectedPilot;
    
    return {
        // Deselect entirely if it's a second click on the same pilot,
        // otherwise go ahead and select the one that was clicked
        currentPilot : isSamePilot ? null : newSelectedPilot,
    };
}

export default createReducer(initialState, {
    [PILOT_SELECT] : selectPilot,
});
```

That gives us some data handling, but we need to hook that up to the UI.  We need to pull the `currentPilot` ID value into `<Pilots>`, and use that in a couple places.  We should pass the actual entry for the current pilot into `<PilotDetails>`, and it would also be nice to highlight the row for that pilot in the list.  We also need to call the `selectPilot` action creator with the ID of the pilot whose row was just clicked on.  Let's look at the relevant changes:

> **[Commit 9062899: Implement selection handling for pilots](https://github.com/markerikson/project-minimek-educative/commit/90628997a501bf314fa48540aeaf7acabb3e48f3)**

**[features/pilots/Pilots.jsx](https://github.com/markerikson/project-minimek-educative/blob/90628997a501bf314fa48540aeaf7acabb3e48f3/src/features/pilots/Pilots.jsx)**
```diff
// Omit initial imports

+import {selectPilot} from "../pilotsActions";
+import {selectCurrentPilot} from "../pilotsSelectors";

const mapState = (state) => {}
    // Omit pilot objects lookup

+   const currentPilot = selectCurrentPilot(state);

    // Now that we have an array of all pilot objects, return it as a prop
-   return {pilots};
+   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 Pilots extends Component {
    render() {
-       const {pilots = []} = this.props;
+       const {pilots = [], selectPilot, currentPilot} = this.props;

-       const currentPilot = pilots[0] || {};
+       const currentPilotEntry = pilots.find(pilot => pilot.id === currentPilot) || {}

        // Omit irrelevant layout component rendering for space
        return (
            <Segment>
-               <PilotsList pilots={pilots} />
+               <PilotsList
+                   pilots={pilots}
+                   onPilotClicked={selectPilot}
+                   currentPilot={currentPilot}
+               />
-               <PilotDetails pilot={currentPilot} />
+               <PilotDetails pilot={currentPilotEntry} />
            </Segment>
        );
    }
}

-export default connect(mapState)(Pilots);
+export default connect(mapState, actions)(Pilots);
```

**[features/pilots/PilotsList/PilotsList.jsx](https://github.com/markerikson/project-minimek-educative/blob/90628997a501bf314fa48540aeaf7acabb3e48f3/src/features/pilots/PilotsList/PilotsList.jsx)**
```diff
export default class PilotsList extends Component {
    render() {
-       const {pilots} = this.props;
+       const {pilots, onPilotClicked, currentPilot} = this.props;

        const pilotRows = pilots.map(pilot => (
-           <PilotsListRow pilot={pilot} key={pilot.name}/>
+           <PilotsListRow
+               pilot={pilot}
+               key={pilot.name}
+               onPilotClicked={onPilotClicked}
+               selected={pilot.id === currentPilot}
+           />
        ));

        // Omit layout rendering for space
    }
```

**[features/pilots/PilotsList/PilotsListRow.jsx](https://github.com/markerikson/project-minimek-educative/blob/90628997a501bf314fa48540aeaf7acabb3e48f3/src/features/pilots/PilotsList/PilotsListRow.jsx)**
```diff
+import _ from "lodash";

-const PilotsListRow = ({pilot={}}) => {
+const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected}) => {
    const {
+        id = null,
        // Omit other fields
    } = pilot;

    return (
-       <Table.Row>
+       <Table.Row onClick={() => onPilotClicked(id)} active={selected}>
```


And voila!  If we click on an entry in the pilots list, we should now see that row highlighted, and the entry also shown in the `<PilotDetails>` form:

Introduction

Project Planning and Setup

UI Layout and Project Structure

Using Redux-ORM

Loading and Displaying Data

Connected Lists, Forms, and Performance

Form Change Handling, Data Editing, and Feature Reducers

Form Draft Data Management

Managing Modals and Context Menus

Wrapping Up

Handling Selection Logic