Building React Applications with Idiomatic Redux (Egghead.io)

This repo contains notes from Dan Abramov's second Redux course on Egghead.io.

Gitbook Setup

npm install -g gitbook-cli
npm install
gitbook install
gitbook serve

01. Simplifying the Arrow Functions

See how ES6 features can be used to clean up arrow functions even more. Video

02. Supplying the Initial State

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. Video

03. Persisting the State to the Local Storage

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. Video

04. Refactoring the Entry Point

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

05. Adding React Router to the project

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

06. Navigating with React Router <Link>

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

07. Filtering Redux State with React Router Params

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

08. Using withRouter() to Inject the Params into Connected Components

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. Video

09. Using mapDispatchToProps() Shorthand Notation

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

10. Colocating Selectors with reducers

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. Video

11. Normalizing the State Shape

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

12. Wrapping dispatch() to Log Actions

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

13. Adding a Fake Backend to the Project

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

14. Fetching Data on Route Change

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

15. Dispatching Actions with the Fetched Data

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. Video

16. Wrapping dispatch() to Recognize Promises

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. Video

17. The Middleware chain

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. Video

18. Applying Redux Middleware

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. Video

19. Updating the State with the Fetched Data

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. Video

20. Refactoring the reducers

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. Video

21. Displaying Loading Indicators

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

22. Dispatching Actions Asynchronously with Thunks

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

23. Avoiding Race Conditions with Thunks

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

24. Displaying Error Messages

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. Video

25. Creating Data on the Server

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

26. Normalizing API Responses with normalizr

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

27. Updating Data on the Server

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