02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School

Getting Started with Reducers

Learn the fundamentals of Redux state management by creating reducers and comparing them with React's native state. Build a counter app, understand state sharing limitations, and test with JEST.

Duration: 44:44

Created with

Ben Fhala

Ben Fhala

Ben Fhala is the creative force and founder behind 02geek, a pioneering platform dedicated to making web development accessible to everyone. With over 18 years of experience in the industry, Ben has a deep passion for teaching and a knack for breaking down complex concepts into easy-to-understand lessons.

Getting Started with Reducers Overview

What you'll learn

Mastering Redux: Getting Started with Reducers (Chapter 1)

Welcome to Getting Started with Reducers, the first chapter of the Mastering Redux series. This chapter lays the foundation for understanding how to manage state effectively using Redux. By the end of this chapter, you will have a clear understanding of how React handles state natively, the limitations of component-level state, and how Redux can help overcome those limitations.

Chapter Overview

In this chapter, we will explore how React components manage state internally and highlight the challenges that arise when state needs to be shared across multiple components. We will then dive into creating our first Redux reducer and learn how Redux provides a more centralized and predictable way of managing state, making it easier to handle complex applications.

What You Will Learn

  • React's Native State Management: Understand how React components manage state and the challenges of keeping data confined within components.
  • Introduction to Reducers: Learn the concept of reducers, how they help manage state in Redux, and how they can simplify complex state transitions.
  • Creating a Counter with React and Redux: Build a simple counter using React's internal state and then refactor it to use Redux, demonstrating the advantages of Redux for state management.

Lessons in Chapter 1

  1. 001 - Welcome to Redux

    • Get an overview of Redux and its benefits for state management in web applications.
  2. 002 - Understanding the Core Concepts

    • Dive into the core principles of Redux, including state, actions, and reducers.
  3. 003 - Setting Up the Environment

    • Learn how to set up your Redux environment and configure your project.
  4. 004 - Creating Our First Reducer

    • Create your first reducer and understand how reducers manage and update state in Redux.
  5. 005 - Testing with JEST

    • Learn how to use JEST to test your reducer and ensure that your code remains reliable as it evolves.
  6. 006 - Integrating Redux

    • Discover how to use the Redux library to create a store, and utilize the getState and dispatch methods to fully implement Redux in your application.

Why This Chapter?

  • Foundational Knowledge: This chapter serves as the foundation for understanding Redux, ensuring that you have a solid grasp of how state management works in both React and Redux.
  • Hands-On Examples: Each lesson includes practical, hands-on examples that will help you grasp key concepts and apply them to your projects.
  • Bridge to Advanced Topics: Mastering reducers is crucial for progressing to the more advanced aspects of Redux covered in later chapters, such as integrating Redux with React and optimizing state structure.

Who Should Follow This Chapter?

This chapter is ideal for:

  • React Developers wanting to improve their state management skills and explore the limitations of component-level state.
  • Web Developers interested in learning how Redux can make complex state management more predictable and maintainable.
  • Frontend Engineers looking to gain foundational knowledge before diving deeper into Redux and its ecosystem.

Requirements

  • Basic understanding of JavaScript and React is recommended to get the most out of this chapter.

Ready to master state management with Redux? Let's dive in and start building your Redux skills!

Configuring our Project with Create-React-App

Learn how to use create-react-app to quickly set up a React project. This video explains the benefits and step-by-step process of using create-react-app.

06:57

Creating a React Component

Quick recap on creating a React component using JSX and ES6 for beginners.

09:05

Working with the React state

Learn the basics of React state, its limitations, and how to use it effectively before diving into Redux.

08:23

Creating our First Reducer

Learn how to create your first reducer in Redux and understand the foundational concepts behind state management.

05:57

Testing with JEST

Learn how to write automated tests using JEST for Redux, ensuring your application remains stable and reliable.

06:45

Integrating Redux

Learn how to integrate the Redux library by creating a store, utilizing the getState method, and dispatching actions to manage state effectively.

08:00