Understanding Redux: A Beginner's Guide To State Management

Gain insights into Redux fundamentals, explore application-based problems, and discover how to effectively manage state in React environments with this beginner's guide to state management.

Beginner

92 Lessons

12h

Certificate of Completion

Gain insights into Redux fundamentals, explore application-based problems, and discover how to effectively manage state in React environments with this beginner's guide to state management.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

18 Playgrounds

8 Quizzes

This course includes

18 Playgrounds

8 Quizzes

Course Overview

This course is a beginner's gateway into the mechanics of using Redux as an application building platform. It takes a bottom-up approach, enforcing the basic aspects of Redux before incorporating them together in a creative and interactive way. It begins with a short theoretical section before moving on to application based problems. The course does assume that the user has a basic idea of how React works, as Redux works in the React environment. Let's dive in!

Course Content

Getting to know Redux (Theory)

Get familiar with Redux for managing state in complex JavaScript applications.

Introduction What is Redux?

Why use Redux?

Explaining Redux to a 5 year Old

Redux Store Actions in Redux Redux Reducer

The Power of Redux

Your First Redux Application

Unpack the core of transitioning a React app to Redux for state management through practical examples.

Introduction The Structure of the React Hello World Application Revisiting your Knowledge of Redux Creating a Redux STORE The Store and Reducer Relationship The Reducer Getting back to the Refactoring Process The Second createStore Argument Possible Gotcha Conclusion and Summary Introducing Exercises Exercise: User Card Exercise Solution

Understanding State Updates with Actions

Examine Redux actions, reducers, and state updates through practical examples and exercises.

Building Skypey: A More Advanced Example

Enhance your skills in planning, designing, and normalizing state for advanced app development.

Introduction Planning the Application Resolving the Initial App Layout: Laying Down The Foundation Resolving the Initial App Layout: The Sidebar Resolving the Initial App Layout: The Main

Building Skypey: Designing the State Object

Take a closer look at designing and managing the state object for Skypey.

The State Object Identifying the Relationships Restructuring the State Object The Messages Field The Major Problem with Using Objects Over Arrays Preserving the Order in Arrays Recap on the Design of the State Object Building the List of Users Setting up the Store Logging the State Object Passing the Sidebar data via Props

Building Skypey: The User Component

7 Lessons

Tackle building user components, optimizing prop management, and refactoring state initialization with multiple reducers.

Building Skypey: The Empty Screen

4 Lessons

Practice using components and CSS to build state-driven, dynamic views with Redux.

Building Skypey: The Chat Window

4 Lessons

Step through rendering the chat window by dispatching actions and handling active user updates.

Building Skypey: Header and Chat Window

8 Lessons

Walk through integrating header and chat components, dynamic message rendering, and contact deletion.

10.

Building Skypey: Messaging

7 Lessons

Go hands-on with creating and managing message input and submission in Redux.

11.

The Skypey App

4 Lessons

Grasp the fundamentals of building the Skypey app, focusing on efficient state management and enhancing functionality.

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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!