Building React Applications with Idiomatic Redux

This course will pick up where we left off with the Redux Fundamentals course. If you haven't watched that yet, you are highly encouraged to do so!

You are about to learn practical production ready techniques for building your React and Redux applications. You will explore advanced state management, middleware, React Router integration, and other common problems you are likely to encounter while building applications for your clients and customers.

Even if you have already spent time studying Redux, this course will show you better practices straight from the library's creator Dan Abramov.

Click here to see the Community Notes on this course

Watch User Created Playlist (27)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Redux: Simplifying the Arrow Functions

Redux: Displaying Error Messages

Redux: Creating Data on the Server

Redux: Normalizing API Responses with normalizr

Redux: Updating Data on the Server

Redux: Supplying the Initial State

Redux: Persisting the State to the Local Storage

Redux: Refactoring the Entry Point

Redux: Adding React Router to the Project

Redux: Navigating with React Router <Link>

Redux: Filtering Redux State with React Router Params

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

Redux: Using mapDispatchToProps() Shorthand Notation

Redux: Colocating Selectors with Reducers

Redux: Normalizing the State Shape

Redux: Wrapping dispatch() to Log Actions

Redux: Adding a Fake Backend to the Project

Redux: Fetching Data on Route Change

Redux: Dispatching Actions with the Fetched Data

Redux: Wrapping dispatch() to Recognize Promises

Redux: The Middleware Chain

Redux: Applying Redux Middleware

Redux: Updating the State with the Fetched Data

Redux: Refactoring the Reducers

Redux: Displaying Loading Indicators

Redux: Dispatching Actions Asynchronously with Thunks

Redux: Avoiding Race Conditions with Thunks

react tutorial about Redux: Simplifying the Arrow Functions

Redux: Simplifying the Arrow Functions

2:34 react

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

react tutorial about Redux: Displaying Error Messages

Redux: Displaying Error Messages

10:59 react

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.

react tutorial about Redux: Creating Data on the Server

Redux: Creating Data on the Server

5:36 react

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

react tutorial about Redux: Normalizing API Responses with normalizr

Redux: Normalizing API Responses with normalizr

7:58 react

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

react tutorial about Redux: Updating Data on the Server

Redux: Updating Data on the Server

5:24 react

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

react tutorial about Redux: Supplying the Initial State

Redux: Supplying the Initial State

4:13 react

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.

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

Redux: Persisting the State to the Local Storage

7:36 react

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.

react tutorial about Redux: Refactoring the Entry Point

Redux: Refactoring the Entry Point

2:25 react

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

react tutorial about Redux: Adding React Router to the Project

Redux: Adding React Router to the Project

1:43 react

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

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

Redux: Navigating with React Router <Link>

2:38 react

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

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

Redux: Filtering Redux State with React Router Params

4:09 react

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

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

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

2:58 react

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.

react tutorial about Redux: Using mapDispatchToProps() Shorthand Notation

Redux: Using mapDispatchToProps() Shorthand Notation

1:49 react

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

react tutorial about Redux: Colocating Selectors with Reducers

Redux: Colocating Selectors with Reducers

4:52 react

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.

react tutorial about Redux: Normalizing the State Shape

Redux: Normalizing the State Shape

6:46 react

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

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

Redux: Wrapping dispatch() to Log Actions

4:31 react

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

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

Redux: Adding a Fake Backend to the Project

1:32 react

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

react tutorial about Redux: Fetching Data on Route Change

Redux: Fetching Data on Route Change

3:46 react

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

react tutorial about Redux: Dispatching Actions with the Fetched Data

Redux: Dispatching Actions with the Fetched Data

6:58 react

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.

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

Redux: Wrapping dispatch() to Recognize Promises

6:29 react

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.

react tutorial about Redux: The Middleware Chain

Redux: The Middleware Chain

8:44 react

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.

react tutorial about Redux: Applying Redux Middleware

Redux: Applying Redux Middleware

2:57 react

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.

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

Redux: Updating the State with the Fetched Data

9:33 react

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.

react tutorial about Redux: Refactoring the Reducers

Redux: Refactoring the Reducers

6:23 react

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.

react tutorial about Redux: Displaying Loading Indicators

Redux: Displaying Loading Indicators

5:59 react

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

react tutorial about Redux: Dispatching Actions Asynchronously with Thunks

Redux: Dispatching Actions Asynchronously with Thunks

4:44 react

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

react tutorial about Redux: Avoiding Race Conditions with Thunks

Redux: Avoiding Race Conditions with Thunks

4:43 react

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

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