Redux

Watch User Created Playlist (34)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Redux: The Single Immutable State Tree

Redux: Describing State Changes with Actions

Redux: Pure and Impure Functions

Redux: The Reducer Function

Redux: Writing a Counter Reducer with Tests

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

Redux: Implementing Store from Scratch

Redux: React Counter Example

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

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

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

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

Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Objects

Redux: Reducer Composition with combineReducers()

Redux: Implementing combineReducers() from Scratch

Redux: React Todo List Example (Adding a Todo)

Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Filtering Todos)

Redux: Extracting Presentational Components (Todo, TodoList)

Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Passing the Store Down Explicitly via Props

Redux: Passing the Store Down Implicitly via Context

Redux: Passing the Store Down with <Provider> from React Redux

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Redux: Generating Containers with connect() from React Redux (AddTodo)

Redux: Generating Containers with connect() from React Redux (FooterLink)

Redux: Extracting Action Creators

Getting Started with Redux Dev Tools

P

React Testing: The Redux Store - Initial State

P

React Testing: Redux Reducers

P

React Testing: The Redux Store - Multiple Actions

P
js tutorial about Redux: The Single Immutable State Tree

Redux: The Single Immutable State Tree

2:11 js

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.

js tutorial about Redux: Describing State Changes with Actions

Redux: Describing State Changes with Actions

2:54 js

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.

js tutorial about Redux: Pure and Impure Functions

Redux: Pure and Impure Functions

1:19 js

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.

js tutorial about Redux: The Reducer Function

Redux: The Reducer Function

1:54 js

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.

js tutorial about Redux: Writing a Counter Reducer with Tests

Redux: Writing a Counter Reducer with Tests

2:36 js

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.

js tutorial about Redux: Store Methods: getState(), dispatch(), and subscribe()

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

3:09 js

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

js tutorial about Redux: Implementing Store from Scratch

Redux: Implementing Store from Scratch

2:28 js

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

js tutorial about Redux: React Counter Example

Redux: React Counter Example

2:18 js

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

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

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

3:54 js

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

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

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

2:38 js

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

js tutorial about Redux: Writing a Todo List Reducer (Adding a Todo)

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

4:11 js

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

js tutorial about Redux: Writing a Todo List Reducer (Toggling a Todo)

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

2:47 js

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

js tutorial about Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Arrays

2:21 js

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

js tutorial about Redux: Reducer Composition with Objects

Redux: Reducer Composition with Objects

2:42 js

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

js tutorial about Redux: Reducer Composition with combineReducers()

Redux: Reducer Composition with combineReducers()

2:10 js

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

js tutorial about Redux: Implementing combineReducers() from Scratch

Redux: Implementing combineReducers() from Scratch

4:22 js

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

js tutorial about Redux: React Todo List Example (Adding a Todo)

Redux: React Todo List Example (Adding a Todo)

7:25 js

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

js tutorial about Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Toggling a Todo)

3:29 js

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

js tutorial about Redux: React Todo List Example (Filtering Todos)

Redux: React Todo List Example (Filtering Todos)

8:14 js

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

js tutorial about Redux: Extracting Presentational Components (Todo, TodoList)

Redux: Extracting Presentational Components (Todo, TodoList)

4:52 js

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

js tutorial about Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

8:35 js

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

js tutorial about Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (FilterLink)

8:04 js

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

js tutorial about Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

6:19 js

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

js tutorial about Redux: Passing the Store Down Explicitly via Props

Redux: Passing the Store Down Explicitly via Props

3:54 js

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.

js tutorial about Redux: Passing the Store Down Implicitly via Context

Redux: Passing the Store Down Implicitly via Context

7:56 js

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

js tutorial about Redux: Passing the Store Down with <Provider> from React Redux

Redux: Passing the Store Down with <Provider> from React Redux

1:30 js

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

js tutorial about Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

5:13 js

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

js tutorial about Redux: Generating Containers with connect() from React Redux (AddTodo)

Redux: Generating Containers with connect() from React Redux (AddTodo)

4:41 js

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

js tutorial about Redux: Generating Containers with connect() from React Redux (FooterLink)

Redux: Generating Containers with connect() from React Redux (FooterLink)

3:27 js

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

js tutorial about Redux: Extracting Action Creators

Redux: Extracting Action Creators

3:52 js

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

js tutorial about Getting Started with Redux Dev Tools

Getting Started with Redux Dev Tools

6:04 js PRO

The Redux DevTools let us wire up our Redux app to a time-traveling debugger. This can help us debug, test, and review the state of our application in a simple history that can be "bookmarked" and scrubbed through. In this lesson, we wire up the Redux DevTools into our app, and walk through the different "monitors" and options available.

More information can be found on the official Redux DevTools GitHub page: https://github.com/gaearon/redux-devtools

react tutorial about React Testing: The Redux Store - Initial State

React Testing: The Redux Store - Initial State

1:32 react PRO

When using Redux, it can be useful to test that your initial state is being rendered as expected. In this lesson, we will set up a test to check the initial state of our store.

react tutorial about React Testing: Redux Reducers

React Testing: Redux Reducers

6:42 react PRO

Sometimes we want to test our Redux reducers to make sure they work as expected. In this lesson we will walk through setting up some Redux reducer tests for common situations and edge cases.

react tutorial about React Testing: The Redux Store - Multiple Actions

React Testing: The Redux Store - Multiple Actions

7:53 react PRO

When using Redux, we can test that our application state changes are working by testing that dispatching actions to the store creates our expected output. In this lesson we will run a few realistic actions back to back (as if the user is using the app) and then test that the state tree looks as we expect it to. These types of tests that ensure all of your redux logic is working as expected give you a lot of value for not too much effort (they test your entire app's state in one big swoop). You may also find it useful to add more granular/individual tests for your reducers and/or actions, which we will cover in other lessons in this course.

NOTE: This lesson assumes you have used Redux. If you are new to Redux, it is recommended that you first watch the Getting Started With Redux course.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?