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

We're going to need to track which tab is active, change that on click, and re-render the tab list.  We also will eventually need to swap which content panel is visible as well.  I added a `<TabBar>` component that takes an array of tab names and labels and renders the tabs.  Now, we could have the `<TabBar>` store the value of which tab is currently selected, but it's a good practice in React to write ["container components"](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) which store the state, and keep other components that are "presentational" and just display things based on the props they're given.  So, we'll create a `<TabBarContainer>` component to track which tab is currently selected:


> **[Commit 325a103: Create a TabBar component to render a list of tabs](https://github.com/markerikson/project-minimek-educative/commit/325a1039f3b5b47288edc0f078db555e279ee7f0)**

**[features/tabs/Tab.jsx](https://github.com/markerikson/project-minimek-educative/blob/325a1039f3b5b47288edc0f078db555e279ee7f0/src/features/tabs/Tab.jsx)**
```jsx
import React from "react";
import {Menu} from "semantic-ui-react";

const Tab = ({name, label, onClick, active}) => (
    <Menu.Item
        name={name}
        content={label}
        active={active}
        onClick={() => onClick(name)}
    />
);

export default Tab;
```

**[features/tabs/TabBar.jsx](https://github.com/markerikson/project-minimek-educative/blob/325a1039f3b5b47288edc0f078db555e279ee7f0/src/features/tabs/TabBar.jsx)**
```jsx
import React from "react";
import {Menu} from "semantic-ui-react";

import Tab from "./Tab";

const TabBar = (props) => {
    const {tabs, currentTab, onTabClick, ...otherProps} = props;

    const tabItems = tabs.map(tabInfo => {
        const {name, label} = tabInfo;

        return (
            <Tab
                key={name}
                name={name}
                label={label}
                active={currentTab === name}
                onClick={onTabClick}
            />
        );
    });

    return (
        <div>
            <Menu tabular attached="top" {...otherProps}>
                {tabItems}
            </Menu>
        </div>
    )
}

export default TabBar;
```

**[features/tabs/TabBarContainer.jsx](https://github.com/markerikson/project-minimek-educative/blob/325a1039f3b5b47288edc0f078db555e279ee7f0/src/features/tabs/TabBarContainer.jsx)**
```jsx
import React, {Component} from "react";

import TabBar from "./TabBar";

export default class TabBarContainer extends Component {
    constructor(props) {
        super(props);

        const {tabs = [{name : null}]} = props;

        const firstTab = tabs[0];

        this.state = {
            currentTab : firstTab.name
        } ;
    }

    onTabClick = (name) => {
        this.setState({currentTab : name});
    }

    render() {
        const {tabs, ...otherProps} = this.props;
        const {currentTab} = this.state;
        
        return (
            <TabBar
                {...otherProps}
                currentTab={currentTab}
                onTabClick={this.onTabClick}
                tabs={tabs}
            />
        )
    }
}
```


With that in place, we can then use it to render our main set of tabs:

> **[Commit 98a0e4d: Render the list of tabs using TabBarContainer](https://github.com/markerikson/project-minimek-educative/commit/98a0e4d75c4151ecb42322a7f1db9a771c6396f5)**

**[App.js](https://github.com/markerikson/project-minimek-educative/blob/98a0e4d75c4151ecb42322a7f1db9a771c6396f5/src/App.js)**
```jsx
class App extends Component {
    render() {
        const tabs = [
            {name : "unitInfo", label : "Unit Info"},
            {name : "pilots", label : "Pilots"},
            {name : "mechs", label : "Mechs"},
            {name : "unitOrganization", label : "Unit Organization"}
        ];

        return (
            <div className="App">
                <div className="App-header">
                    <Header inverted as="h1">Project Mini-Mek</Header>
                </div>
                <Container>
                    <TabBarContainer tabs={tabs} size="massive" />
                </Container>
            </div>
        );
    }
}
```

No major visual changes from this, but we can now click on each tab and see the "active" tab get highlighted.


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

Building a TabBar Component