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

# Initial Redux Configuration

CRA gave us a basic application template to start with.  We now need to set up the initial Redux store and reducers, make the store available to our component tree, and make sure that it's being used.  Let's jump right in and walk through the pieces.

> **[Commit 44a18c4: Add initial Redux configuration and sample component](https://github.com/markerikson/project-minimek-educative/commit/44a18c48673bcce1d25bd4c484d8b3f5c5193f88)**


First, we need to create our Redux store instance.  

**[store/configureStore.js](https://github.com/markerikson/project-minimek-educative/blob/44a18c48673bcce1d25bd4c484d8b3f5c5193f88/src/store/configureStore.js)**
```js
import {createStore, applyMiddleware, compose} from "redux";

import thunk from "redux-thunk";

import rootReducer from "../reducers/rootReducer";

export default function configureStore(preloadedState) {
    const middlewares = [thunk];
    const middlewareEnhancer = applyMiddleware(...middlewares);

    const storeEnhancers = [middlewareEnhancer];
    
    const composedEnhancer = compose(...storeEnhancers);

    const store = createStore(
        rootReducer,
        preloadedState,
        composedEnhancer
    );

    return store;
}
```

I like to keep my store setup logic in a `configureStore` function that can be further improved as time goes on.  I also try to keep the setup for each piece of the configuration process separate, so it's easy to follow what's going on, instead of cramming it into one big nested function call.

We need to add the `redux-thunk` middleware to our store.  Right now it's the only middleware we're using, but we'll put it into a `middlewares` array to make it easier to add other middleware to the setup process down the road.  Similarly, the only store enhancer we're using right now is `applyMiddleware`, but we'll do the same thing for clarity.  Finally, we pass our three arguments to `createStore` and return the new store instance.


**[reducers/testReducer.js](https://github.com/markerikson/project-minimek-educative/blob/44a18c48673bcce1d25bd4c484d8b3f5c5193f88/src/reducers/testReducer.js)**
```js
const initialState = {
    data : 42
};

export default function testReducer(state = initialState, action) {
    return state;
}
```

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

import testReducer from "./testReducer";

const rootReducer = combineReducers({
    test : testReducer,
});

export default rootReducer;
```

Our initial reducers just pass along some test data so we can verify things are working.

Next, we use the React-Redux library and render a `<Provider>` around our root application component.  That makes the Redux store accessible to any Redux-connected React component in the tree.

**[index.js](https://github.com/markerikson/project-minimek-educative/blob/44a18c48673bcce1d25bd4c484d8b3f5c5193f88/src/index.js)**
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux";

import App from './App';
import './index.css';

import configureStore from "./store/configureStore";
const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);
```

Finally, we add a simple test component, connect it to Redux, and render it in our App component to verify that everything's hooked up properly:

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

const mapState = state => ({
    data : state.test.data
});

class SampleComponent extends Component {
    render() {
        const {data} = this.props;

        return (
            <div>
                Data from Redux: {data}
            </div>
        );
    }
}

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

**[App.js](https://github.com/markerikson/project-minimek-educative/blob/44a18c48673bcce1d25bd4c484d8b3f5c5193f88/src/App.js)**
```jsx
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import SampleComponent from "./SampleComponent";

class App extends Component {
    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h2>Project Mini-Mek</h2>
                </div>
                <SampleComponent />
            </div>
        );
    }
}

export default App;
```

We should now see the text "Data from Redux: 42" in our page, right below the header bar.


# Adding the Redux DevTools Extension

One of the original reasons for Redux's creation was the goal of **"time-travel debugging"**: the ability to see the list of dispatched actions, view the contents of an action, see what parts of the state were changed after the action was dispatched,  view the overall application state after that dispatch, and step back and forth between dispatched actions.  Dan Abramov wrote the original [Redux DevTools](https://github.com/gaearon/redux-devtools) toolset, which showed that information with the UI as a component within the page.

Since then, Mihail Diordiev has built the **[Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)**, a browser extension that bundles together the core Redux DevTools logic and several community-built data visualizers as a browser extension, and adds a bunch of useful functionality on top of that.  Connecting the DevTools Extension to your store requires a few extra checks, so there's now a package available that encapsulates the process needed to hook up the DevTools Extension to your store.

We'll add the helper package with `yarn add redux-devtools-extension`, then make a couple small changes to the store setup logic:

> **[Commit d80abff: Add Redux DevTools Extension](https://github.com/markerikson/project-minimek-educative/commit/d80abff852986e4cc614770e0aba74bd5dfdf521)**

> **[Commit b88a813: Use DevTools Extension when creating the store](https://github.com/markerikson/project-minimek-educative/commit/b88a813e69f021bd4b842ce3bd4be873d4473842)**

**[store/configureStore.js](https://github.com/markerikson/project-minimek-educative/blob/b88a813e69f021bd4b842ce3bd4be873d4473842/src/store/configureStore.js)**
```diff
- import {createStore, applyMiddleware, compose} from "redux";
+ import {createStore, applyMiddleware} from "redux";
+ import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';


- const composedEnhancer = compose(...storeEnhancers);
+ const composedEnhancer = composeWithDevTools(...storeEnhancers);
```

This should add the DevTools enhancer to our store, but only when we're in development mode.  With that installed, the Redux DevTools browser extension can now view the contents of our store and the history of the dispatched actions. 

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

Redux Setup