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

Okay, so loading two fields was pretty easy.  It's time to start actually working out what the application's data model will look like.

As described previously, the goal of this sample application is to build a miniature version of the Battletech [MekHQ game tool](http://megamek.info/mekhq).  **We want to be able to track Battlemech Pilots assigned to a combat unit, which specific Battlemech each Pilot is assigned to, and ultimately organize Battlemechs and their Pilots into groups called "Lances" and "Companies"**.

We're going to use the [Redux-ORM](https://github.com/tommikaikkonen/redux-orm) library to help define what our data types are and how they relate to each other.  Those Model types can then be used to help us load data into our store, and query and update that data.

Before we can use Redux-ORM, we need to add the package:

```bash
yarn add redux-orm@0.9.4
```

That will download Redux-ORM and its other dependencies.  Yarn will update the `package.json` and `yarn.lock` files, and should also add the package tarballs to the `./offline-mirror` folder we created earlier.  We should commit all of those.

> **[Commit 8b90d93: Add Redux-ORM package](https://github.com/markerikson/project-minimek-educative/commit/8b90d93ee740bacf8e7760ec9ef77e017d8c4b36)**


Next, we need to **create a Redux-ORM `ORM` instance, and a parent reducer for all of our entity data**.  Since this code isn't specific to a single feature, we'll add it underneath the `app` folder.

**[Commit efacb84: Set up Redux-ORM and add an initial entities reducer](https://github.com/markerikson/project-minimek-educative/commit/efacb845f9c39d92f4fe215e2b8782a3d4d83b9d)**

**[app/orm.js](https://github.com/markerikson/project-minimek-educative/blob/efacb845f9c39d92f4fe215e2b8782a3d4d83b9d/src/app/orm.js)**
```js
import {ORM} from "redux-orm";

const orm = new ORM();

export default orm;
```

**[app/reducers/entitiesReducer.js](https://github.com/markerikson/project-minimek-educative/blob/efacb845f9c39d92f4fe215e2b8782a3d4d83b9d/src/app/reducers/entitiesReducer.js)**
```js
import {createReducer} from "common/utils/reducerUtils";

import orm from "app/orm"

const initialState = orm.getEmptyState()

export default createReducer(initialState, {
});
```

**[app/reducers/rootReducer.js](https://github.com/markerikson/project-minimek-educative/blob/efacb845f9c39d92f4fe215e2b8782a3d4d83b9d/src/app/reducers/rootReducer.js)**
```diff
import {combineReducers} from "redux";

+import entitiesReducer from "./entitiesReducer";
import tabReducer from "features/tabs/tabsReducer";
import unitInfoReducer from "features/unitInfo/unitInfoReducer";

const rootReducer = combineReducers({
+   entities : entitiesReducer,
    unitInfo : unitInfoReducer,
    tabs : tabReducer,
});
```

If we look at our overall app state now using the Redux DevTools, we'll see `entities: {}`.  That's because we haven't added any Model types to the ORM instance.

The first Model type we should add is for pilots.  We'll keep it _really_ simple - just a Pilot class, with no relations, and add that to our ORM instance.  There's no specific rule for where Model classes should be defined, so for the moment we're going to define them inside the relevant feature folders.

> **[Commit decdbea: Add initial Redux-ORM Pilot model](https://github.com/markerikson/project-minimek-educative/commit/decdbeacd77cf51a9237ae2517cb5feb528ec6f4)**

**[features/pilots/Pilot.js](https://github.com/markerikson/project-minimek-educative/blob/decdbeacd77cf51a9237ae2517cb5feb528ec6f4/src/features/pilots/Pilot.js)**
```js
import {Model} from "redux-orm";

export default class Pilot extends Model {
    static modelName = "Pilot";
}
```

**[app/orm.js](https://github.com/markerikson/project-minimek-educative/blob/decdbeacd77cf51a9237ae2517cb5feb528ec6f4/src/app/orm.js)**
```diff
import {ORM} from "redux-orm";

+import Pilot from "features/pilots/Pilot";

const orm = new ORM();

+orm.register(Pilot);

export default orm;
```

Now that we have the Pilot model class registered with the ORM instance, we can go back to the Redux DevTools and see that the generated initial state for our `entities` slice reducer now includes an empty "table" for the Pilot type:

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

Setting Up Redux-ORM