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

I prefer to consistently use "absolute import" paths that start from the `src` folder.  Among other things, that makes it easier to move files around, as compared to relative import paths.  

Normally, I'd enable that by changing some path resolution options in my Webpack config, but since Create-React-App keeps all the configuration hidden, that's not an option unless we eject the project.  I did some digging around, and it turns out that, at least for now, there's a semi-undocumented way to enable this in a CRA app without having to eject.  If the `NODE_PATH` environment variable is set, CRA/Webpack will use that in the resolution process.  Also, if a `.env` file exists in the project root, those environment variables will be loaded up.  So, we can enable absolute imports by putting those two together.  However, the default `.gitignore` file generated by CRA ignores `.env`, so we'll need to fix that:

> **[Commit 53ee842: Enable absolute import paths (such as "features/a/SomeComponent")](https://github.com/markerikson/project-minimek-educative/commit/53ee84257895b2abf839ad3f7b49e5a8ee8e185a)**

**[.env](https://github.com/markerikson/project-minimek-educative/blob/53ee84257895b2abf839ad3f7b49e5a8ee8e185a/.env)**
```bash
NODE_PATH=src
```


With that, we can extract the dummy tab panel components into separate feature folders, and import them into App.js:

> **[Commit 4ee6ecb: Extract tab panels into separate feature folders](https://github.com/markerikson/project-minimek-educative/commit/4ee6ecbf9fe15849f5433e7e8b211c018a78fda1)**

**[App.js](https://github.com/markerikson/project-minimek-educative/blob/4ee6ecbf9fe15849f5433e7e8b211c018a78fda1/src/App.js)**
```diff
import React, { Component } from 'react';
import {
    Header,
    Container,
} from "semantic-ui-react";

-import TabBarContainer from "./features/tabs/TabBarContainer";

import './App.css';

+import TabBarContainer from "features/tabs/TabBarContainer";
+import UnitInfo from "features/unitInfo/UnitInfo";
+import Pilots from "features/pilots/Pilots";
+import Mechs from "features/mechs/Mechs";
+import UnitOrganization from "features/unitOrganization/UnitOrganization";

-const UnitInfo = () => <div>Unit Info content</div>;
-const Pilots = () => <div>Pilots content</div>;
-const Mechs = () => <div>Mechs content</div>;
-const UnitOrganization = () => <div>Unit Organization content</div>;
```

And, since we're doing a bit of cleanup, we'll go ahead and change the page title to say "Project Mini-Mek" instead of "React App":

> **[Commit 23b6051: Change page title](https://github.com/markerikson/project-minimek-educative/commit/23b60510ca9ca444e7a00bebc81c6b069a3383e7)**

**[public/index.html](https://github.com/markerikson/project-minimek-educative/blob/23b60510ca9ca444e7a00bebc81c6b069a3383e7/public/index.html)**
```diff
-   <title>React App</title>
+   <title>Project Mini-Mek</title>
```

Now we can move on to actually start building the first real parts of our UI.

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

Absolute Imports and Feature Folders