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

Now that we have pilots added to the store, we can update our `<Pilots>` and `<PilotsList>` components to display them.  Since we already had `<Pilots>` acting as a container component, all we really need to do is connect it to the store, return an array of plain JS pilot objects as a prop, and switch from using the sample entry we had stored in its state to the array from props.

To do this, we're going to import the singleton Redux-ORM `ORM`  instance we created.  In our `mapState` function, we'll create a `Session` instance from the current set of "tables" in our state, and use the `Pilot` class we defined to query those tables.  We'll  retrieve a list of the actual JS objects, and return those as a prop.

**[Commit 1f17b50: Connect the Pilots component to render a list of pilots from the store](https://github.com/markerikson/project-minimek-educative/commit/1f17b50c83171e0807d3bb487560d972f02a8798)**

**[features/pilots/Pilots.jsx](https://github.com/markerikson/project-minimek-educative/blob/1f17b50c83171e0807d3bb487560d972f02a8798/src/features/pilots/Pilots.jsx)**
```js
// Omit imports not relevant to this commit

const mapState = (state) => {
    // Create a Redux-ORM Session from our "entities" slice, which
    // contains the "tables" for each model type
    const session =  orm.session(state.entities);

    // Retrieve the model class that we need.  Each Session
    // specifically "binds" model classes to itself, so that
    // updates to model instances are applied to that session.
    // These "bound classes" are available as fields in the sesssion.
    const {Pilot} = session;

    // Query the session for all Pilot instances.
    // The QuerySet that is returned from all() can be used to
    // retrieve instances of the Pilot class, or retrieve the
    // plain JS objects that are actually in the store.
    // The toRefArray() method will give us an array of the
    // plain JS objects for each item in the QuerySet.
    const pilots = Pilot.all().toRefArray();

    // Now that we have an array of all pilot objects, return it as a prop
    return {pilots};
}


export class Pilots extends Component {
    render() {
        const {pilots = []} = this.props;

        // Use the first pilot as the "current" one for display, if available.
        const currentPilot = pilots[0] || {};

        // Omit rendering code, which didn't change
    }
}

export default connect(mapState)(Pilots);
```

And with that, we finally have something useful and interesting displayed on screen!  


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

Displaying a List of Pilots