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

# Code Cleanup

In [Connected Lists, Forms, and Performance](https://www.educative.io/courses/practical-redux/connecting-list-components), we connected our lists directly to Redux, set up basic editing for the UnitInfo form, and added the ability to toggle "editing" mode for a selected Pilot.  This time, we'll **look at some advanced techniques for managing form change events, implement editing for model entries, and use a custom reducer structure to handle feature logic**.

But, before we dive in to the real work for this section, we've got a few bits of cleanup that will help us later.


## Handling Data Reloads

There's a problem with the current `entitiesReducer` logic.  If we click the "Load Unit Info" button twice in a session, the reducer will try to load the same sample data again, and will throw errors because data with those IDs already exists in state.  We can fix this by having the case reducer delete any existing entries before it loads in the new data.

> **[Commit e5af624: Clear out existing models on load to avoid conflicts when reloading data](https://github.com/markerikson/project-minimek-educative/commit/e5af6246a424d3b530231da9257f75ab8b7a83b0)**

**[app/reducers/entitiesReducer.js](https://github.com/markerikson/project-minimek-educative/blob/e5af6246a424d3b530231da9257f75ab8b7a83b0/src/app/reducers/entitiesReducer.js)**
```diff
    const {pilots, designs, mechs} = payload;

+   // Clear out any existing models from state so that we can avoid
+   // conflicts from the new data coming in if data is reloaded
+   [Pilot, Mech, MechDesign].forEach(modelType => {
+       modelType.all().toModelArray().forEach(model => model.delete());
+   });
```

We _could_ potentially also resolve this by using the `Model.upsert()` method I mentioned earlier, but it's safest to just delete the old entries before we insert the new ones.


## Cleaning Up the PilotDetails Component

Since we're going to eventually add callback functions to handle the inputs in `<PilotDetails>`, now is a good time to convert it from a functional component to a class component.

> **[Commit f46122b: Convert PilotDetails to a class component](https://github.com/markerikson/project-minimek-educative/commit/f46122b2a2924769831ab1882269cf3ffe7d8689)**


We're also going to rework the `<PilotDetails>` form a bit.  The "gunnery" and "piloting" fields are going to have a limited range of values, so we might as well make them dropdowns.  Also, Semantic-UI-React's `<Form.Field>` component supports some useful shorthand syntax.  You can pass a label string and a component type as a prop, and it will render them.  It will also forward any unknown props onwards to the input component it's rendering.  here's an example:

```diff
-<Form.Field name="rank" width={16}>
-   <label>Rank</label>
-   <Dropdown
-       fluid
-       selection
-       options={RANKS}
-       value={rank}
-       disabled={!canStopEditing}
-   />
-</Form.Field>
+<Form.Field
+   name="rank"
+   label="Rank"
+   width={16}
+   control={Dropdown}
+   fluid
+   selection
+   options={RANKS}
+   value={rank}
+   disabled={!canStopEditing}
+/>
```

The `name`, `label`, and `width` props are handled by the `<Form.Field>` component.  It renders an instance of `<Dropdown>`, and passes it the remaining props.  (Order doesn't matter here, I just wrote them with the Field's props first and the Dropdown's props last.)

I suppose it's a tossup which formatting you prefer.  I can see arguments both ways.  But, given that I already did the work, we'll go with the latter approach :)

> **[Commit 7fb450e: Rework PilotDetails form layout for consistency](https://github.com/markerikson/project-minimek-educative/commit/7fb450e1da25ecad2f7c92674ded6bbf61e2da3e)**

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

Code Cleanup

Code Cleanup

Handling Data Reloads