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

Looking back at our description of what a "context menu" is, we said that it needs to be absolutely positioned on the screen.  We can put together a generic component to help render something at an absolute position.



> **[Commit fdd8ba0: Add an AbsolutePosition component](https://github.com/markerikson/project-minimek-educative/commit/fdd8ba0b89eb68c179d88aa789fd71cccfa2fc0e)**

**[common/components/AbsolutePosition.jsx](https://github.com/markerikson/project-minimek-educative/blob/fdd8ba0b89eb68c179d88aa789fd71cccfa2fc0e/src/common/components/AbsolutePosition.jsx)**
```jsx
import React from "react";
import PropTypes from "prop-types";

const AbsolutePosition = (props) => {
    const {children, nodeRef} = props;
    const style = {
        position: 'absolute',
        top: props.top,
        bottom : props.bottom,
        left: props.left,
        right : props.right,
        width: props.width,
    };

    return (
        <div style={style} className={props.className} ref={nodeRef}>
            {children}
        </div>
    );
}

AbsolutePosition.propTypes = {
    top: PropTypes.number,
    bottom : PropTypes.number,
    left: PropTypes.number,
    width: PropTypes.number,
    nodeRef : PropTypes.func,
};

export default AbsolutePosition;
```

All we really do here is set a `div`'s style to `position : "absolute"`, apply the provided positions, and insert the children inside the div.  The only slightly unusual thing here is that we're taking a prop called `nodeRef`, and passing it down as a callback ref to the `div`.  We'll see why that matters in a minute.


Now for the actual context menu behavior.  First, we'll add the `react-portal` library to our app:

> **[Commit 1602441: Add the React-Portal library](https://github.com/markerikson/project-minimek-educative/commit/1602441d921ed8614abfd1132a377b5ff7025a01)**



Then, we'll implement the core of our context menu functionality, very similar to how we built the `ModalManager` component and reducer logic earlier.  

> **[Commit 5c3a3d9: Implement core context menu handling logic](https://github.com/markerikson/project-minimek-educative/commit/5c3a3d96f48ca968719c9021e8cf3c9c524ccfa2)**

**[features/contextMenus/contextMenuReducer.js](https://github.com/markerikson/project-minimek-educative/blob/5c3a3d96f48ca968719c9021e8cf3c9c524ccfa2/src/features/contextMenus/contextMenuReducer.js)**
```js
import {createReducer} from "common/utils/reducerUtils";

import {
    CONTEXT_MENU_SHOW,
    CONTEXT_MENU_HIDE,
} from "./contextMenuConstants";

const contextMenuInitialState = {
    show : false,
    location : {
        x : null,
        y : null,
    },
    type : null,
    menuArgs : undefined,
}

function showContextMenu(state, payload) {
    return {
        ...state,
        show : true,
        ...payload
    };
}

function hideContextMenu(state, payload) {
    return {
        ...contextMenuInitialState
    }
};

export default createReducer(contextMenuInitialState, {
    [CONTEXT_MENU_SHOW] : showContextMenu,
    [CONTEXT_MENU_HIDE] : hideContextMenu
});
```

Our `contextMenuReducer` is fairly similar to the first iteration of the modal reducer.  I probably could have done almost the same thing, where `null` represents no context menu and a valid object represents actually showing a menu, but wound up implementing this a bit differently in a couple ways.  (Not entirely sure why, either, but I did :) )


We're going to track a `show` flag that indicates whether we're showing a menu, and `type` and `menuArgs` represent the same concepts as with our modals.  We also need to track the location on screen where the menu should be positioned.

**[features/contextMenus/ContextMenu.jsx](https://github.com/markerikson/project-minimek-educative/blob/5c3a3d96f48ca968719c9021e8cf3c9c524ccfa2/src/features/contextMenus/ContextMenu.jsx)**
```jsx
import React, {Component} from "react";
import {connect} from "react-redux";

import AbsolutePosition from "common/components/AbsolutePosition";

import {hideContextMenu} from "./contextMenuActions";

const actions = {hideContextMenu};

export class ContextMenu extends Component {
    componentDidMount() {
        document.addEventListener('click', this.handleClickOutside, true);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside, true);
    }

    handleClickOutside = (e) => {
        if (!this.node || !this.node.contains(e.target) ) {
            this.props.hideContextMenu();
        }
    }

    render() {
        const {location} = this.props;

        return (
            <AbsolutePosition
                left={location.x + 2}
                top={location.y}
                className="contextMenu"
                nodeRef={node => this.node = node}
            >
                {this.props.children}
            </AbsolutePosition>
        )
    }
}

export default connect(null, actions)(ContextMenu);
```

Next up we have a generic wrapper component for context menus.  This component takes care of listening for clicks outside the menu and calling a close function, as well as using an `<AbsolutePosition>` component to put the menu in the right spot.  Note that we offset the `x` coordinate by a couple pixels just to have the menu appear slightly offset from underneath the cursor.  Finally, note that we use the `nodeRef` prop for `AbsolutePosition`.  That's because we need to do some DOM checks to see if a click on the document is inside or outside the menu.  Since the `ContextMenu` component doesn't render any actual HTML itself, it needs to have the `AbsolutePosition` component "forward a ref" on down.  This is a useful technique, and [Dan Abramov wrote an example of the "forwarded refs" pattern a while back](https://github.com/reactjs/react-redux/pull/270#issuecomment-175217424).


**[features/contextMenus/ContextMenuManager.jsx](https://github.com/markerikson/project-minimek-educative/blob/5c3a3d96f48ca968719c9021e8cf3c9c524ccfa2/src/features/contextMenus/ContextMenuManager.jsx)**
```jsx
import React, {Component} from "react";
import {connect} from "react-redux";
import Portal from 'react-portal';

import ContextMenu from "./ContextMenu";

import {selectContextMenu} from "./contextMenuSelectors";

const menuTypes = {
};

export function contextMenuManagerMapState(state) {
    return {
        contextMenu : selectContextMenu(state)
    };
}

export class ContextMenuManager extends Component {
    render() {
        const {contextMenu} = this.props;
        const {show, location, type, menuArgs = {}} = contextMenu;

        let menu = null;

        if(show) {
            let MenuComponent = menuTypes[type];

            if(MenuComponent) {
                menu = (
                    <Portal isOpened={true}>
                        <ContextMenu location={location}>
                            <MenuComponent {...menuArgs} />
                        </ContextMenu>
                    </Portal>
                )
            }
        }

        return menu;
    }
}

export default connect(contextMenuManagerMapState)(ContextMenuManager);
```

Similar to our `ModalManager` component, the `ContextMenuManager` uses the description in Redux to look up the right menu component if appropriate, and renders it.  In this case, we also surround the menu component with our `<ContextMenu>` component to put it in the right position and handle clicks outside of it, and surround that with a `<Portal>` to ensure that it floats over the UI.

With those in place, we add the `contextMenuReducer` and the `ContextMenuManager` to our root reducer and the core application layout:

> **[Commit e979a27: Add the context menu reducer and component to the app](https://github.com/markerikson/project-minimek-educative/commit/e979a27b28ffec619870943b380ef71534ed886f)**

And we can now throw together a quick test menu component to verify that this is working (including adding it to the context menu lookup table):

**[Commit 67908aa: Add an initial test context menu component and hook it up](https://github.com/markerikson/project-minimek-educative/commit/67908aa587ce58589332d42138a725e4436d4ad7)**

**[features/contextMenus/TestContextMenu.jsx](https://github.com/markerikson/project-minimek-educative/blob/67908aa587ce58589332d42138a725e4436d4ad7/src/features/contextMenus/TestContextMenu.jsx)**
```jsx
import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class TestContextMenu extends Component {
    render() {
        return (
            <Menu vertical>
                <Menu.Item>
                    <Menu.Header>Menu Header: {this.props.text} </Menu.Header>
                    <Menu.Menu>
                        <Menu.Item>First Menu Item</Menu.Item>
                        <Menu.Item>Second Menu Item</Menu.Item>
                    </Menu.Menu>
                </Menu.Item>
            </Menu>
        )
    }
}
```

If we click our "Show Test Context Menu" button, here's what we should see:

Looking back at our description of what a "context menu" is, we said that it needs to be absolutely positioned on the screen.  We can put together a generic component to help render something at an absolute position.



> **[Commit fdd8ba0: Add an AbsolutePosition component](https://github.com/markerikson/project-minimek-educative/commit/fdd8ba0b89eb68c179d88aa789fd71cccfa2fc0e)**

**[common/components/AbsolutePosition.jsx](https://github.com/markerikson/project-minimek-educative/blob/fdd8ba0b89eb68c179d88aa789fd71cccfa2fc0e/src/common/components/AbsolutePosition.jsx)**
```jsx
import React from "react";
import PropTypes from "prop-types";

const AbsolutePosition = (props) => {
    const {children, nodeRef} = props;
    const style = {
        position: 'absolute',
        top: props.top,
        bottom : props.bottom,
        left: props.left,
        right : props.right,
        width: props.width,
    };

    return (
        <div className={props.className} ref={nodeRef}>
            {children}
        </div>
    );
}

AbsolutePosition.propTypes = {
    top: PropTypes.number,
    bottom : PropTypes.number,
    left: PropTypes.number,
    width: PropTypes.number,
    nodeRef : PropTypes.func,
};

export default AbsolutePosition;
```

All we really do here is set a `div`'s style to `position : "absolute"`, apply the provided positions, and insert the children inside the div.  The only slightly unusual thing here is that we're taking a prop called `nodeRef`, and passing it down as a callback ref to the `div`.  We'll see why that matters in a minute.


Now for the actual context menu behavior.  First, we'll add the `react-portal` library to our app:

> **[Commit 1602441: Add the React-Portal library](https://github.com/markerikson/project-minimek-educative/commit/1602441d921ed8614abfd1132a377b5ff7025a01)**



Then, we'll implement the core of our context menu functionality, very similar to how we built the `ModalManager` component and reducer logic earlier.  

> **[Commit 5c3a3d9: Implement core context menu handling logic](https://github.com/markerikson/project-minimek-educative/commit/5c3a3d96f48ca968719c9021e8cf3c9c524ccfa2)**

**[features/contextMenus/contextMenuReducer.js](https://github.com/markerikson/project-minimek-educative/blob/5c3a3d96f48ca968719c9021e8cf3c9c524ccfa2/src/features/contextMenus/contextMenuReducer.js)**
```js
import {createReducer} from "common/utils/reducerUtils";

import {
    CONTEXT_MENU_SHOW,
    CONTEXT_MENU_HIDE,
} from "./contextMenuConstants";

const contextMenuInitialState = {
    show : false,
    location : {
        x : null,
        y : null,
    },
    type : null,
    menuArgs : undefined,
}

function showContextMenu(state, payload) {
    return {
        ...state,
        show : true,
        ...payload
    };
}

function hideContextMenu(state, payload) {
    return {
        ...contextMenuInitialState
    }
};

export default createReducer(contextMenuInitialState, {
    [CONTEXT_MENU_SHOW] : showContextMenu,
    [CONTEXT_MENU_HIDE] : hideContextMenu
});
```

Our `contextMenuReducer` is fairly similar to the first iteration of the modal reducer.  I probably could have done almost the same thing, where `null` represents no context menu and a valid object represents actually showing a menu, but wound up implementing this a bit differently in a couple ways.  (Not entirely sure why, either, but I did :) )


We're going to track a `show` flag that indicates whether we're showing a menu, and `type` and `menuArgs` represent the same concepts as with our modals.  We also need to track the location on screen where the menu should be positioned.

**[features/contextMenus/ContextMenu.jsx](https://github.com/markerikson/project-minimek-educative/blob/5c3a3d96f48ca968719c9021e8cf3c9c524ccfa2/src/features/contextMenus/ContextMenu.jsx)**
```jsx
import React, {Component} from "react";
import {connect} from "react-redux";

import AbsolutePosition from "common/components/AbsolutePosition";

import {hideContextMenu} from "./contextMenuActions";

const actions = {hideContextMenu};

export class ContextMenu extends Component {
    componentDidMount() {
        document.addEventListener('click', this.handleClickOutside, true);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside, true);
    }

    handleClickOutside = (e) => {
        if (!this.node || !this.node.contains(e.target) ) {
            this.props.hideContextMenu();
        }
    }

    render() {
        const {location} = this.props;

        return (
            <AbsolutePosition
                left={location.x + 2}
                top={location.y}
                className="contextMenu"
                nodeRef={node => this.node = node}
            >
                {this.props.children}
            </AbsolutePosition>
        )
    }
}

export default connect(null, actions)(ContextMenu);
```

Next up we have a generic wrapper component for context menus.  This component takes care of listening for clicks outside the menu and calling a close function, as well as using an `<AbsolutePosition>` component to put the menu in the right spot.  Note that we offset the `x` coordinate by a couple pixels just to have the menu appear slightly offset from underneath the cursor.  Finally, note that we use the `nodeRef` prop for `AbsolutePosition`.  That's because we need to do some DOM checks to see if a click on the document is inside or outside the menu.  Since the `ContextMenu` component doesn't render any actual HTML itself, it needs to have the `AbsolutePosition` component "forward a ref" on down.  This is a useful technique, and [Dan Abramov wrote an example of the "forwarded refs" pattern a while back](https://github.com/reactjs/react-redux/pull/270#issuecomment-175217424).


**[features/contextMenus/ContextMenuManager.jsx](https://github.com/markerikson/project-minimek-educative/blob/5c3a3d96f48ca968719c9021e8cf3c9c524ccfa2/src/features/contextMenus/ContextMenuManager.jsx)**
```jsx
import React, {Component} from "react";
import {connect} from "react-redux";
import Portal from 'react-portal';

import ContextMenu from "./ContextMenu";

import {selectContextMenu} from "./contextMenuSelectors";

const menuTypes = {
};

export function contextMenuManagerMapState(state) {
    return {
        contextMenu : selectContextMenu(state)
    };
}

export class ContextMenuManager extends Component {
    render() {
        const {contextMenu} = this.props;
        const {show, location, type, menuArgs = {}} = contextMenu;

        let menu = null;

        if(show) {
            let MenuComponent = menuTypes[type];

            if(MenuComponent) {
                menu = (
                    <Portal isOpened={true}>
                        <ContextMenu location={location}>
                            <MenuComponent {...menuArgs} />
                        </ContextMenu>
                    </Portal>
                )
            }
        }

        return menu;
    }
}

export default connect(contextMenuManagerMapState)(ContextMenuManager);
```

Similar to our `ModalManager` component, the `ContextMenuManager` uses the description in Redux to look up the right menu component if appropriate, and renders it.  In this case, we also surround the menu component with our `<ContextMenu>` component to put it in the right position and handle clicks outside of it, and surround that with a `<Portal>` to ensure that it floats over the UI.

With those in place, we add the `contextMenuReducer` and the `ContextMenuManager` to our root reducer and the core application layout:

> **[Commit e979a27: Add the context menu reducer and component to the app](https://github.com/markerikson/project-minimek-educative/commit/e979a27b28ffec619870943b380ef71534ed886f)**

And we can now throw together a quick test menu component to verify that this is working (including adding it to the context menu lookup table):

**[Commit 67908aa: Add an initial test context menu component and hook it up](https://github.com/markerikson/project-minimek-educative/commit/67908aa587ce58589332d42138a725e4436d4ad7)**

**[features/contextMenus/TestContextMenu.jsx](https://github.com/markerikson/project-minimek-educative/blob/67908aa587ce58589332d42138a725e4436d4ad7/src/features/contextMenus/TestContextMenu.jsx)**
```jsx
import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class TestContextMenu extends Component {
    render() {
        return (
            <Menu vertical>
                <Menu.Item>
                    <Menu.Header>Menu Header: {this.props.text} </Menu.Header>
                    <Menu.Menu>
                        <Menu.Item>First Menu Item</Menu.Item>
                        <Menu.Item>Second Menu Item</Menu.Item>
                    </Menu.Menu>
                </Menu.Item>
            </Menu>
        )
    }
}
```

If we click our "Show Test Context Menu" button, here's what we should see:

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 the Context Menu System