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

It's time to start hooking up some of our UI to the store.  We'll start with the simplest part: the Unit Info tab.  First, a bit of background info - it would be helpful to know what a "unit" is.

[A Battletech "unit" is a military group](http://www.sarna.net/wiki/Inner_Sphere_Military_Structure), which could be part of the official armed forces of one of the various "star nations" in the Battletech universe, or an independent combat group like a mercenary unit.  The five [Great Houses](http://www.sarna.net/wiki/Successor_States) in the Battletech universe all maintain vast armies, while hundreds of [mercenary units](http://www.sarna.net/wiki/Mercenary_unit) large and small try to make a living through combat.  Some examples of units from the game universe include:

- Great House army units:
  - 24th Dieron Regulars from the Draconis Combine
  - 2nd Free Worlds Guards from the Free Worlds League
  - 11th Avalon Hussars from the Federated Suns
- Mercenaries:
  - Wolf's Dragoons
  - 21st Centauri Lancers
  - Hansen's Roughriders

For now, we're just going to track two attributes for a unit: their name, and what larger group they are affiliated with.

We'll start by creating a simple reducer that stores the "Name" and "Affiliation" values, add that to our root reducer, and connect the `<UnitInfo>` component to use the data:



> **[Commit 0c93284: Add initial unit info reducer and connection](https://github.com/markerikson/project-minimek-educative/commit/0c93284d292f5139f76d88f6d9379a77c8d1789c)**

**[features/unitInfo/unitInfoReducer.js](https://github.com/markerikson/project-minimek-educative/blob/0c93284d292f5139f76d88f6d9379a77c8d1789c/src/features/unitInfo/unitInfoReducer.js)**
```js
import {createReducer} from "common/utils/reducerUtils";

const initialState = {
    name : "Black Widow Company",
    affiliation : "wd",
};

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

**[features/unitInfo/unitInfoSelectors.js](https://github.com/markerikson/project-minimek-educative/blob/0c93284d292f5139f76d88f6d9379a77c8d1789c/src/features/unitInfo/unitInfoSelectors.js)**
```js
export const selectUnitInfo = state => state.unitInfo;
```

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

import tabReducer from "features/tabs/tabsReducer";
import unitInfoReducer from "features/unitInfo/unitInfoReducer";

const rootReducer = combineReducers({
    unitInfo : unitInfoReducer,
    tabs : tabReducer,
});

export default rootReducer;
```

**[features/unitInfo/UnitInfo.jsx](https://github.com/markerikson/project-minimek-educative/blob/0c93284d292f5139f76d88f6d9379a77c8d1789c/src/features/unitInfo/UnitInfo.jsx)**
```jsx
const mapState = (state) => ({
    unitInfo : selectUnitInfo(state),
});

const UnitInfo = ({unitInfo = {}}) => {
    const {name, affiliation} = unitInfo;

    return (
        <Segment attached="bottom">
            <Form size="large">
                <Form.Field name="name" width={6} >
                    <label>Unit Name</label>
                    <input placeholder="Name" value={name}/>
                </Form.Field>
                <Form.Field name="affiliation" width={6}>
                    <label>Affiliation</label>
                    <Dropdown
                        selection
                        options={FACTIONS}
                        value={affiliation}
                    />
                </Form.Field>
            </Form>
        </Segment>
    );
};

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

Now that the `<UnitInfo>` component is being driven by data from the store, we can do something with that sample data from the mock API.  Let's update the unit info reducer to respond to the `DATA_LOADED` action and see what happens:


> **[Commit 97bed75: Load unit details from sample data](https://github.com/markerikson/project-minimek-educative/commit/97bed75ad9b8aca505fdda5b097cc343834721c6)**

**[features/unitInfo/unitInfoReducer.js](https://github.com/markerikson/project-minimek-educative/blob/97bed75ad9b8aca505fdda5b097cc343834721c6/src/features/unitInfo/unitInfoReducer.js)**
```js
import {createReducer} from "common/utils/reducerUtils";

import {DATA_LOADED} from "features/tools/toolConstants";

const initialState = {
    name : "N/A",
    affiliation : "",
};

function dataLoaded(state, payload) {
    const {unit} = payload;

    return unit;
}

export default createReducer(initialState, {
    [DATA_LOADED] : dataLoaded,
});
```

The reducer's very simple for now.  We start with some empty data in our initial state, listen for `DATA_LOADED`, and return the `unit` data from the action payload.  

If we load the page, we should see "Name: N/A".  If we then click the "Reload Unit Data" button in the Tools tab, we should see it change to "Name: Black Widow Company".  No point in showing a screenshot here, because the UI should still look exactly the same as it has up until now.

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

Connecting the Unit Info Tab