HomeCoursesUnderstanding Redux: A Beginner's Guide To State Management

Beginner

12h

Understanding Redux: A Beginner's Guide To State Management
Save

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.

Join 2.6 million developers at

Content

Reviews

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!

This course is a beginner's gateway into the mechanics of using Redux as an application building platform. It takes a bottom-up ...Show More

Content

92 Lessons8 Quizzes1 Challenge

Getting to know Redux (Theory)

8 Lessons

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

Your First Redux Application

13 Lessons

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

21 Lessons

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

Introduction

What is a Redux Action?

Handling Responses to Actions in the Reducer

Examining the Actions in the Application

Introducing Action Creators

A Quiz on Actions

Bringing Everything Together: Index Files

Bringing Everything Together: Buttons

Bringing Everything Together: Handling Button Clicks

Actions Dispatched. Does this Thing Work?

Making the Reducer Count

Returning the State from the Reducer

Subscribing to Store Updates

Important Note on Using store.subscribe()

Almost Done

Conclusion and Summary

A Quiz in Redux Theory

Exercise 1: Bank Application

Exercise Solution: Bank Application

Exercise 2: Time Counter

Exercise Solution: Time Counter

Building Skypey: A More Advanced Example

5 Lessons

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

11 Lessons

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 the User Component

You Don’t Have to Pass Down Props

Container and Component Folder Structure

Refactoring to Set Initial State from the Reducer

Reducer Composition

Refactoring Skypey to Use Multiple Reducers

Reducer Composition Revisited

Building Skypey: The Empty Screen

4 Lessons

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

The Active User

Passing the Props

Javascript Implementation

CSS Implementation

Building Skypey: The Chat Window

4 Lessons

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

Rendering the Active User

Action Dispatch

Dispatch Recognition

Breaking the Chat Window into Smaller Components

Building Skypey: Header and Chat Window

8 Lessons

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

The Header Component

Building the Header

The Chats Component

Javascript Implementation For Chats

Chats Implementation Explained

Styling the Chat

Exercise: Delete Contact

Exercise Solution

10.

Building Skypey: Messaging

7 Lessons

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

The Message Component

Building Message Input

Final Touches to the Message Input Component

Submitting the Form

Updating the Message State

Retaining Messages in the State

Exercise: Clear Message Field

11.

The Skypey App

4 Lessons

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

Tweak: Scroll Removal for New Messages

Conclusion and Summary

Exercises: Edit and Delete Messages

Exercise Solution

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Ohans Emmanuel

Looks a bit advance? Start here.

Course

Angular: Designing and Architecting Web Applications

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

20 hours

beginner

Course

Web Development: Unraveling HTML, CSS, and JavaScript

Explore HTML, CSS, and JavaScript fundamentals. Gain insights into forms, controls, OOP in JavaScript, and key CSS patterns. Create responsive, stylized, and performant web applications.

20 hours

beginner

Course

Grokking Bit Manipulation for Coding Interviews

The ultimate guide to bit manipulation for coding interviews. Developed by FAANG engineers, practice with real-world interview questions, and get interview-ready in just a few hours.

3 hours

intermediate

Course

Optimize your web projects with Progressive Web Apps

Gain insights into Progressive Web Apps. Delve into service workers, caching strategies, and their advantages. Learn about real-world Angular projects and deploying PWAs using Firebase. Optimize your web solutions efficiently.

5 hours

beginner

Course

Angular: Designing and Architecting Web Applications

beginner

20 hour

Course

Web Development: Unraveling HTML, CSS, and JavaScript

beginner

20 hour

Course

Grokking Bit Manipulation for Coding Interviews

intermediate

3 hour

Course

Optimize your web projects with Progressive Web Apps

beginner

5 hour

Trusted by 2.6 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!

Course

Practical Redux

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.

10 hours

beginner

Course

Test-driven Development with React

Gain insights into Test-driven Development with React. Learn unit and integration testing using Jest and Enzyme, and explore tools like ESlint, Prettier, Babel, Webpack, and Travis CI.

17 hours 30 mins

beginner

Course

Decode the Coding Interview in JavaScript: Real-World Examples

The ultimate guide to coding interviews in JavaScript. Developed by FAANG engineers, it offers real-world problems and adaptable solutions. Get interview-ready in just a few hours.

17 hours

beginner

Course

The Road to React: The One with Hooks

Gain insights into React fundamentals and Hooks. Delve into styling, app maintenance, and performance optimization. Discover hands-on experience by building a Hacker News app for your portfolio.

beginner

Test-driven Development with React

beginner

17 hour 30 min

Course

Decode the Coding Interview in JavaScript: Real-World Examples