Redux: The Single Immutable State Tree

How is Redux different from Backbone or Flux? Learn the first principle of Redux—the single immutable state tree.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

Redux: Describing State Changes with Actions

2:54 react

You will learn how Redux asks you to describe every change in the application state as a plain JavaScript object called “action”.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

Redux: Pure and Impure Functions

1:19 react

Some functions are more predictable than others. You will learn the difference between the pure and impure functions. Understanding this difference is essential for writing Redux applications.

Redux: The Reducer Function

1:54 react

There is something in common between all Redux applications. They have to implement the reducer: a function that calculates the next state tree based on the previous state tree and the action being dispatched.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

Redux: Writing a Counter Reducer with Tests

2:36 react

You will learn how to write the reducer for the counter application in a test driven development way, as well as the conventions in implementing reducers.

Redux: Store Methods: getState(), dispatch(), and subscribe()

3:09 react

We will learn about the Redux Store and demonstrate how its three methods let us implement a counter application.

Redux: Implementing Store from Scratch

2:28 react

Learn how to build a reasonable approximation of the Redux Store in 20 lines. No magic!

Redux: React Counter Example

2:18 react

Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

3:54 react

Learn how to avoid mutating arrays using concat(), slice(), and the ES6 array spread operator.

Redux: Avoiding Object Mutations with Object.assign() and ...spread

2:38 react

Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects.

Redux: Writing a Todo List Reducer (Adding a Todo)

4:11 react

Learn how to implement adding a todo in a todo list application reducer.

Redux: Writing a Todo List Reducer (Toggling a Todo)

2:47 react

Learn how to implement toggling a todo in a todo list application reducer.

Redux: Reducer Composition with Arrays

2:21 react

Learn the fundamental pattern of building maintainable Redux applications: the reducer composition, and how it can be used to update items in an array.

Redux: Reducer Composition with Objects

2:42 react

Learn the fundamental pattern of building maintainable Redux applications: reducer composition, and how it can be used to update properties of an object.

Redux: Reducer Composition with combineReducers()

2:10 react

Learn how to use combineReducers() utility function to generate a reducer from several other reducers instead of writing it by hand.

Redux: Implementing combineReducers() from Scratch

4:22 react

Learn how to build a reasonable approximation of the combineReducers() utility in 15 lines. No magic!

Redux: React Todo List Example (Adding a Todo)

7:25 react

Learn how to create a React todo list application using the reducers we wrote before.

Redux: React Todo List Example (Toggling a Todo)

3:29 react

Learn how to create a React todo list application using the reducers we wrote before.

Redux: React Todo List Example (Filtering Todos)

8:14 react

Learn how to create a React todo list application using the reducers we wrote before.

Redux: Extracting Presentational Components (Todo, TodoList)

4:52 react

Learn how to separate the looks from the behavior by extracting presentational components.