Home>Courses>The Ultimate Guide to Redux

The Ultimate Guide to Redux

Gain insights into Redux, an open-source library for managing app state. Learn about Redux store creation, middleware, state management, error handling, testing, and building robust applications.

Beginner

143 Lessons

7h 30min

Certificate of Completion

Gain insights into Redux, an open-source library for managing app state. Learn about Redux store creation, middleware, state management, error handling, testing, and building robust applications.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

1 Assessment

71 Playgrounds

Course Overview

Course Content

Apply Your Skills

Course Overview

In this course, you will take a deep dive into Redux, an open-source JavaScript library for managing application state. You will start by running through what Redux is, general concepts, and basic implementation. With the basics out of the way, you will begin working on building a recipe book application, adding more bells and whistles to it as the course progresses. You will learn to create a Redux store, how to work with middleware, state management, error handling, testing, and a whole lot more. By the...Show More

In this course, you will take a deep dive into Redux, an open-source JavaScript library for managing application state. You wil...Show More

Course Content

1.

Introduction to Redux

5 Lessons

Get familiar with Redux principles, its architecture, key concepts, and integration with frameworks.

Redux Terminology

General Concepts

Redux and React/Angular

2.

Basic Redux Implementation

6 Lessons

Unpack the core of implementing Redux with a centralized state, reducers, and dispatch functions.

Basic Structure

Creating Functions

Implementing Reducer

Implementing Dispatch

Final Implementation

3.

Cloning a Redux Boilerplate

3 Lessons

Go hands-on with cloning, configuring, and running a Redux boilerplate for streamlined development.

Redux Boilerplate

Skeleton Overview

4.

Complete Redux Project

11 Lessons

Grasp the fundamentals of building a Redux project, focusing on state management and code structuring.

Adding Ingredients

Structuring the Code

A Closer Look at Reducers

Handling Typos and Duplicates

Creating User Interface

Getting Data from the Server

5.

Creating a Store

5 Lessons

Map out the steps for creating and managing a Redux store, including state changes and subscriptions.

Creating a Store

Accessing and Changing the Store

Listening to Updates

Replacing the Reducer

Store as Observable

6.

Decorating the Store

6 Lessons

Simplify complex topics on enhancing and configuring the Redux store with higher-order functions.

Higher-Order Functions

The Compose Function

Store Enhancers

The applyMiddleware function

7.

Actions and Action Creators

7 Lessons

Master the creation, dispatch, and organization of actions and action creators in Redux.

Passing Parameters to Actions

Action Creators

Directory Organization

Flux Standard Actions

String Constants

Testing Action Creators

8.

Redux Thunk

3 Lessons

Step through adding and using Redux-thunk for asynchronous actions and server communication.

Adding Redux-thunk

Server Communication

9.

Redux-Actions Library

5 Lessons

Get started with creating and managing actions in Redux using redux-actions and redux-promises.

Redux-actions Library

createAction() Example

Using redux-actions with redux-promises

10.

Reducers

7 Lessons

Examine Redux reducer concepts of pure functions, state management, and combining strategies.

Reducer Separation

Combining Reducers

Alternative to Switch Statements

11.

Avoiding Mutations

8 Lessons

Enhance your skills in effectively handling immutability to manage Redux state changes.

Why Do We Need to Avoid Mutations?

What Is Immutability?

Ensuring Immutability

Using Immer for Temporary Mutations

Using Higher-Order Reducers

12.

Introduction to Middleware

2 Lessons

Take a closer look at how middleware enhances Redux by managing action flow and custom logic.

13.

Your First Middleware

3 Lessons

Tackle creating and organizing Redux middleware, measuring execution time, and connecting middleware to the store.

Folder Structure

The measureMiddleware

Connecting to Redux

14.

Middleware

6 Lessons

Piece together the parts of middleware in Redux to manage async actions, flow, and action types.

Other Action Types

Parameter-Based Middleware

The Difference Between next() and dispatch()

15.

State Management

5 Lessons

Learn how to use Redux for efficient and maintainable state management in applications.

Reducer Nesting and Coupling

Access to Multiple Nested Data Entities

State as a Database

Access to Multiple Nested Data Entities in Database

16.

Keeping a Normalized State

3 Lessons

Unpack the core of managing a normalized state in Redux for efficient data handling.

Building the Generic Action

Normalizing the Data

17.

Persistence State

3 Lessons

Work your way through implementing state persistence with `redux-persist` for stable Redux applications.

Updating the Root Reducer

Updating the Store

18.

Real-World State

4 Lessons

Enhance your skills in managing and structuring Redux state for complex, real-world applications.

Common State Structure

Keeping the State Manageable

What to Put in the State

19.

Server Communication

3 Lessons

Dig into server communication's role in Redux, including async actions and API middleware implementation.

Asynchronous Action Creators

20.

Moving Code from Action Creators

3 Lessons

Follow the process of centralizing async logic in middleware for simplified Redux workflows.

Avoiding Full URLs

Passing Functions or Strings

21.

Error Handling

2 Lessons

Master the steps to handle errors and unauthorized requests efficiently using Redux middleware.

Handling errors

Handling Unauthorized Requests

22.

Server Communication II

3 Lessons

Try out managing user authentication, loading indicators, and multiple spinners in Redux.

Implementing a Loading Indicator

Implementing Multiple Spinners

23.

Transforming Data

2 Lessons

Unpack the core of data transformation and response normalization in Redux applications.

Transforming Data

Normalizing Responses

24.

Chaining Requests

2 Lessons

Go hands-on with chaining network requests using middleware to manage API interactions seamlessly.

Chaining Network Requests

25.

Managing Side Effects

4 Lessons

Discover various approaches to manage Redux side effects through action creators, middleware, and libraries.

Side Effects in Action Creators

Side Effects in Middleware

Other Solutions

26.

Messaging Patterns

2 Lessons

Map out the steps for efficient state management using routing and transformation patterns.

Routing Patterns

Transformation Patterns

27.

WebSockets

4 Lessons

Tackle WebSocket integration with Redux for efficient real-time communication and action management.

Basic Architecture

Connecting to Redux

WebSocket Implementation

Handling Outgoing Messages and Actions

28.

WebSocket Authentication

1 Lessons

Practice using WebSocket authentication to secure communication and manage session states.

Authenticating Communication

29.

Testing

2 Lessons

Step through testing Redux components and maintaining organized, readable test suites.

Directory Organization

30.

Testing Action Creators

3 Lessons

Unpack the core of testing Redux action creators using plain objects, snapshots, and dynamic inputs.

Testing Action Creators

Using Snapshots

Dynamic Action Creators

31.

Async Action Creators

5 Lessons

Break apart async action creators, mocking axios, creating mock stores, and testing tactics for Redux.

Async Action Creators

Creating a Mock Store

Async Action Creator Test Structure

Basic Async Action Creator Test

32.

Testing Reducers

6 Lessons

Grasp the fundamentals of testing Redux reducers, ensuring state integrity and maintainable tests.

Basic Reducer Test

Simplifying Basic Reducer Test

Making the Tests Pretty

Avoiding Mutations

Action Creators and Reducers

Unknown Actions

33.

Testing Middleware

2 Lessons

Take a closer look at testing Redux middleware using mock functions and streamlined Jest setups.

Middleware Test Structure

Simplifying the Test Structure

34.

Testing Async Middleware

5 Lessons

Follow the process of testing async middleware functionality, handling success, and error scenarios in Redux.

Testing Async Middleware

Successful Server Access

Failed Server Access

35.

Integration Tests

1 Lessons

Test your understanding of integration tests to ensure Redux components function together correctly.

Setup and Integration

36.

Evolution Of Redux

1 Lessons

Learn how to use Redux's evolving ecosystem and core API adjustments.

The Future of Redux

Final Assessment

Assessment

Course Author

Ilya Gelman and

Boris Dinkevich

Build a Resume Builder in React Using Redux

Project

Build a Resume Builder in React Using Redux

Build a Resume Builder in React Using Redux

Create a resume builder in React with Redux, featuring customizable templates and PDF downloads via a multi-step form.

intermediate

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath

Learn in-demand tech skills in half the time

Copyright ©2024 Educative, Inc. All rights reserved.

soc2