Learn Redux: Course OverviewCourse Overview

Core Concepts in Redux

Learn the concepts underlying all Redux applications, including reducers, state, actions, and the store.

Start

Key Concepts

Review core concepts you need to learn to master this subject

Introduction To Redux

Store

Actions

Reducers

Immutable Updates

Rules of Reducers

One-Way Data Flow

Introduction To Redux

A React application can share multiple points of data across components. In many cases managing the data shared can become a complex task.

Redux is a library for managing and updating application state. It provides a centralized “store” for state that is shared across your entire application, with rules ensuring that the state can only be updated in a predictable fashion using events called “actions”.

Redux works well with applications that have a large amount of global state that is accessed by many of the application’s components. The goal of Redux is to provide scaleable and predictable state management.

Core Concepts in Redux

Lesson 1 of 1

1
Introduction to Redux
Imagine a calendar app. One part of the app lists all of the events. Another part of the app sets filters on which types of events are shown. A third part of the app sets the current time zone and …
Start
2
One-Way Data Flow
In most applications, there are three parts: * State – the current data used in the app * View – the user interface displayed to users * Actions – events that a user can take to change the state T…
Start
3
State
State is the current information behind a web application. For a calendar application it includes the events (name, date, label, etc.), the current timezone, and the display filters. For a todo…
Start
4
Actions
Most well-designed applications will have separate components that need to communicate and share data with each other. A todo list might have an input field where the user can type in a new todo …
Start
5
Reducers
So far, we’ve defined the state of our application and the actions representing requests to change that state, but we haven’t seen how these changes are carried out in JavaScript. The answer is a _…
Start
6
Rules of Reducers
In the previous exercise, we wrote reducers that returned a new copy of the state rather than editing it directly. We did this to adhere to the [rules of reducers provided by the Redux documentatio…
Start
7
Immutable Updates and Pure Functions
In programming, there is a more general way to describe the three rules of reducers in Redux: reducers must make immutable updates and be pure functions. If a function makes _immutable updates…
Start
8
Store
So far we have covered state, actions, reducers, and how they participate in the one-way data flow. Where, in JavaScript, does all of this take place? Redux uses a special object called the _stor…
Start
9
Review
Congratulations! In this lesson you’ve built a strong conceptual foundation of Redux and built a state object, some actions, and a reducer along the way. Here’s what else you learned: * Redux is …
Start