Getting Started with Redux

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.

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components.

Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components.

Learn how to pass store down as a prop to container components instead of declaring a top-level variable to prepare for easier testing and server rendered applications.

Learn how to make the store object available to all components by using the advanced React feature called “context”.

Learn how to use the Provider that comes with React Redux instead of the hand-rolled implementation from the previous lesson.

Learn how to write mapStateToProps() and mapDispatchToProps() functions and use connect() from React Redux library to generate container components.

Learn how to inject dispatch() as a prop into a React component by using connect() from React Redux library.

Learn how to use container’s own props inside the mapStateToProps() and mapDispatchToProps() functions.

Learn how to keep code maintainable and self-documenting by extracting action creators from the components.