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

Most of the time, you _probably_ only need one modal open at once.  But, what if you actually _do_ need multiple modals open, stacked on top of each other?  Fortunately, now that we've got the basic modal framework in place, this is pretty simple to add.  All we really need to do have our reducer store an array of modal descriptions instead of just one, and have the `ModalManager` component render multiple modals in response.

While we're at it, we can update our `TestModal` component to actually make use of the new functionality.

> **[Commit f20378c: Implement stackable modals](https://github.com/markerikson/project-minimek-educative/commit/f20378c299fa9d821cde6b38b6b6838279b8f2de)**

**[features/modals/modalReducer.js](https://github.com/markerikson/project-minimek-educative/blob/f20378c299fa9d821cde6b38b6b6838279b8f2de/src/features/modals/modalReducer.js)**
```diff
-const initialState = null;
+const initialState = [];

export function openModal(state, payload) {
    const {modalType, modalProps} = payload;
-   return {modalType, modalProps};
+   // Always pushing a new modal onto the stack
+   return state.concat({modalType, modalProps});
}

export function closeModal(state, payload) {
-   return null;
+   // Always popping the last modal off the stack
+   const newState = state.slice();
+   newState.pop();
+   return newState;
}
```

**[features/modals/ModalManager.jsx](https://github.com/markerikson/project-minimek-educative/blob/f20378c299fa9d821cde6b38b6b6838279b8f2de/src/features/modals/ModalManager.jsx)**
```js
const mapState = (state) => ({currentModals : state.modals});

export class ModalManager extends Component {
    render() {
        const {currentModals} = this.props;

        const renderedModals = currentModals.map( (modalDescription, index) => {
            const {modalType, modalProps = {}} = modalDescription;
            const ModalComponent = modalComponentLookupTable[modalType];

            return <ModalComponent {...modalProps}  key={modalType + index}/>;
        });

        return <span>{renderedModals}</span>
    }
}
```

Our `modalReducer` cases switch to tracking a stack of modal descriptions in an array, and the `ModalManager` component changes to loop over that array and render an array of modal components.

**[features/modals/TestModal.jsx](https://github.com/markerikson/project-minimek-educative/blob/f20378c299fa9d821cde6b38b6b6838279b8f2de/src/features/modals/TestModal.jsx)**
```diff
import {connect} from "react-redux";
import {
    Modal,
+   Button,
} from "semantic-ui-react";

-import {closeModal} from "features/modals/modalActions";
+import {openModal, closeModal} from "features/modals/modalActions";

-const actions = {closeModal};
+const actions = {openModal, closeModal};

export class TestModal extends Component {
+   onNextModalClick = () => {
+       const {counter} = this.props;
+       this.props.openModal("TestModal", {counter : counter + 1});
+   }

    render() {
+       const {counter, closeModal} = this.props;

        return (
            <Modal
                closeIcon="close"
                open={true}
-               onClose={this.props.closeModal}
+               onClose={closeModal}
            >
-               <Modal.Header>Modal #1</Modal.Header>
+               <Modal.Header>Modal #{counter}</Modal.Header>
                <Modal.Content image>
                    <Modal.Description>
-                       <p>This is a modal dialog.  Pretty neat, huh?</p>
+                       <h4>
+                           Value from props:
+                       </h4>
+                       <div>
+                           counter = {counter}
+                       </div>
+                       <div>
+                           <Button onClick={this.onNextModalClick}>Add Another Modal</Button>
+                       </div>
                    </Modal.Description>
                </Modal.Content>
                <Modal.Actions>
```

Our `TestModal` gets changed in two ways.  First, we'll take the `props.counter` value and display it as part of the header and the descriptive text.  Then, we'll add a button and handle clicks on it by dispatching an action to show _another_ modal on top of the current one.  To illustrate that we're stacking them, we increase the counter value and pass it as a prop for the next modal in the stack.

Let's try it out!  If we click the "Show Test Modal" button in the Tools menu, and then click "Add Another Modal" a few times, here's what we get (I temporarily added `dimmer={false}` to `TestModal` to keep the entire page from being blacked out):


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

Making Modals Stackable