Dan Abramov - Redux

Watch User Created Playlist (58)

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

Redux: Adding React Router to the Project

Redux: Normalizing the State Shape

Redux: Persisting the State to the Local Storage

Redux: Adding a Fake Backend to the Project

Redux: Refactoring the Entry Point

Redux: Colocating Selectors with Reducers

Redux: Simplifying the Arrow Functions

Redux: Creating Data on the Server

Redux: Displaying Loading Indicators

Redux: The Middleware Chain

Redux: Navigating with React Router <Link>

Redux: Displaying Error Messages

Redux: Using mapDispatchToProps() Shorthand Notation

Redux: Applying Redux Middleware

Redux: Normalizing API Responses with normalizr

Redux: Updating the State with the Fetched Data

Redux: Updating Data on the Server

Redux: Avoiding Race Conditions with Thunks

Redux: Wrapping dispatch() to Recognize Promises

Redux: Supplying the Initial State

Redux: Dispatching Actions with the Fetched Data

Redux: Fetching Data on Route Change

Redux: Wrapping dispatch() to Log Actions

Redux: Filtering Redux State with React Router Params

Redux: Dispatching Actions Asynchronously with Thunks

Redux: Using withRouter() to Inject the Params into Connected Components

Redux: Refactoring the Reducers

Setting Up WebGL

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 Redux: Adding React Router to the Project

Redux: Adding React Router to the Project

1:43 js

We will learn how to add React Router to a Redux project and make it render our root component.

js tutorial about Redux: Normalizing the State Shape

Redux: Normalizing the State Shape

6:46 js

We will learn how to normalize the state shape to ensure data consistency that is important in real-world applications.

js tutorial about Redux: Persisting the State to the Local Storage

Redux: Persisting the State to the Local Storage

7:36 js

We will learn how to use store.subscribe() to efficiently persist some of the app’s state to localStorage and restore it after a refresh.

js tutorial about Redux: Adding a Fake Backend to the Project

Redux: Adding a Fake Backend to the Project

1:32 js

We will learn about fake backend module that we will be using throughout the next lessons to simulate data fetching.

js tutorial about Redux: Refactoring the Entry Point

Redux: Refactoring the Entry Point

2:25 js

We will learn how to better separate the code in the entry point to prepare it for adding the router.

js tutorial about Redux: Colocating Selectors with Reducers

Redux: Colocating Selectors with Reducers

4:52 js

We will learn how to encapsulate the knowledge about the state shape in the reducer files, so that the components don’t have to rely on it.

js tutorial about Redux: Simplifying the Arrow Functions

Redux: Simplifying the Arrow Functions

2:34 js

We will learn how to reduce the syntactic noise in the action creators and components when using arrow functions.

js tutorial about Redux: Creating Data on the Server

Redux: Creating Data on the Server

5:36 js

We will learn how to wait until the item is created on the server, and update the corresponding local state.

js tutorial about Redux: Displaying Loading Indicators

Redux: Displaying Loading Indicators

5:59 js

We will learn how to display the loading indicators while the data is being fetched.

js tutorial about Redux: The Middleware Chain

Redux: The Middleware Chain

8:44 js

We will learn how we can generalize wrapping dispatch() for different purposes into a concept called “middleware” that is widely available in the Redux ecosystem.

js tutorial about Redux: Navigating with React Router <Link>

Redux: Navigating with React Router <Link>

2:38 js

We will learn how to change the address bar using a component from React Router.

js tutorial about Redux: Displaying Error Messages

Redux: Displaying Error Messages

10:59 js

We will learn how to handle an error inside an async action, display its message in the user interface, and offer user an opportunity to retry the action.

js tutorial about Redux: Using mapDispatchToProps() Shorthand Notation

Redux: Using mapDispatchToProps() Shorthand Notation

1:49 js

We will learn how to avoid the boilerplate code in mapDispatchToProps() for the common case where action creator arguments match the callback prop arguments.

js tutorial about Redux: Applying Redux Middleware

Redux: Applying Redux Middleware

2:57 js

We will learn how to replace the middleware we wrote and the custom code we used to glue it together with the existing core and third party utilities.

js tutorial about Redux: Normalizing API Responses with normalizr

Redux: Normalizing API Responses with normalizr

7:58 js

We will learn how to use normalizr to convert all API responses to a normalized format so that we can simplify the reducers.

js tutorial about Redux: Updating the State with the Fetched Data

Redux: Updating the State with the Fetched Data

9:33 js

We will learn how moving the source of truth for the data to the server changes the state shape and the reducers in our app.

js tutorial about Redux: Updating Data on the Server

Redux: Updating Data on the Server

5:24 js

We will learn how to wait until the item is updated on the server, and then update the corresponding local state.

js tutorial about Redux: Avoiding Race Conditions with Thunks

Redux: Avoiding Race Conditions with Thunks

4:43 js

We will learn how Redux Thunk middleware lets us conditionally dispatch actions to avoid unnecessary network requests and potential race conditions.

js tutorial about Redux: Wrapping dispatch() to Recognize Promises

Redux: Wrapping dispatch() to Recognize Promises

6:29 js

We will learn how to teach dispatch() to recognize Promises so that we can move the async logic out of the components into asynchronous action creators.

js tutorial about Redux: Supplying the Initial State

Redux: Supplying the Initial State

4:13 js

We will learn how to start a Redux app with a previously persisted state, and how it merges with the initial state specified by the reducers.

js tutorial about Redux: Dispatching Actions with the Fetched Data

Redux: Dispatching Actions with the Fetched Data

6:58 js

We will learn how to dispatch a Redux action after the data has been fetched and recap how to do it when the route changes.

js tutorial about Redux: Fetching Data on Route Change

Redux: Fetching Data on Route Change

3:46 js

We will learn how to fire up an async request when the route changes.

js tutorial about Redux: Wrapping dispatch() to Log Actions

Redux: Wrapping dispatch() to Log Actions

4:31 js

We will learn how centralized updates in Redux let us log every state change to the console along with the action that caused it.

js tutorial about Redux: Filtering Redux State with React Router Params

Redux: Filtering Redux State with React Router Params

4:09 js

We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time.

js tutorial about Redux: Dispatching Actions Asynchronously with Thunks

Redux: Dispatching Actions Asynchronously with Thunks

4:44 js

We will learn about “thunks”—the most common way to write async action creators in Redux.

js tutorial about Redux: Using withRouter() to Inject the Params into Connected Components

Redux: Using withRouter() to Inject the Params into Connected Components

2:58 js

We will learn how to use withRouter() to inject params provided by React Router into connected components deep in the tree without passing them down all the way down as props.

js tutorial about Redux: Refactoring the Reducers

Redux: Refactoring the Reducers

6:23 js

We will learn how to remove the duplication in our reducer files and how to keep the knowledge about the state shape colocated with the newly extracted reducers.

js tutorial about Setting Up WebGL

Setting Up WebGL

4:20 js

In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.

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