 Resources from Dan Abramov in 2024

This course will pick up where we left off with the [Redux Fundamentals course](https://egghead.io/series/getting-started-with-redux). 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](https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes)**


React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Building React Applications with Idiomatic Redux

In this comprehensive tutorial, Dan Abramov - the creator of Redux - will teach you how to manage state in your [React](/q/react) application with [Redux](/q/redux). 

[State management](https://egghead.io/playlists/react-state-management-in-2021-6732) is absolutely critical in providing users with a well-crafted experience with minimal bugs. 

It's also one of the hardest aspects of a modern front-end application to get right.

Redux provides a solid, stable, and mature solution to managing state in your React application. Through a handful of small, useful patterns, Redux can transform your application from a total mess of confusing and scattered state, into a delightfully organized, easy to understand modern [JavaScript](/q/javascript) powerhouse.

The principles of Redux aren't new, but they are packaged and presented for you in an easy to use a library that not only elevates your applications but also improves your general understanding of building JavaScript UIs.

In this course, Dan Abramov will show you the fundamentals of Redux, so that you can start using it to simplify your applications. 

There are some amazing [community notes on this course here on Github](https://github.com/tayiorbeii/egghead.io_redux_course_notes).



Fundamentals of Redux Course from Dan Abramov

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

Redux: Normalizing API Responses with normalizr

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

Redux: Fetching Data on Route Change

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: The Reducer Function

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.

Redux: The Middleware Chain

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

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

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

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

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

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

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

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

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: Writing a Counter Reducer with Tests

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 Arrays

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

Redux: Implementing combineReducers() from Scratch

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.

Redux: Refactoring the Reducers

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.

Redux: Wrapping dispatch() to Recognize Promises

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

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

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

Redux: Implementing Store from Scratch

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

Redux: React Todo List Example (Toggling a Todo)

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

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

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

Redux: Displaying Loading Indicators

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

Topics

Instructors

Content Type

Dan Abramov

Getting Started with Redux

Building React Applications with Idiomatic Redux

Building React Applications with Idiomatic Redux

Fundamentals of Redux Course from Dan Abramov

Redux: Normalizing API Responses with normalizr

Redux: Fetching Data on Route Change

Redux: The Reducer Function

Redux: The Middleware Chain

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

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

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

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

Redux: Writing a Counter Reducer with Tests

Redux: Reducer Composition with Arrays

Redux: Implementing combineReducers() from Scratch

Redux: Refactoring the Reducers

Redux: Wrapping dispatch() to Recognize Promises

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

Redux: Implementing Store from Scratch

Redux: React Todo List Example (Toggling a Todo)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Displaying Loading Indicators

Redux: Avoiding Race Conditions with Thunks