Making hot reloading mainstream. Created React Hot Loader, Redux, React DnD.
Dan uses the Operator font for coding.
showing 57 lessons...
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.
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.
We will learn about “thunks”—the most common way to write async action creators in Redux.
We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time.
We will learn how centralized updates in Redux let us log every state change to the console along with the action that caused it.
We will learn how to fire up an async request when the route changes.
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.
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.
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.
We will learn how Redux Thunk middleware lets us conditionally dispatch actions to avoid unnecessary network requests and potential race conditions.
We will learn how to wait until the item is updated on the server, and then update the corresponding local state.
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.
We will learn how to use normalizr to convert all API responses to a normalized format so that we can simplify the reducers.
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.
We will learn how to avoid the boilerplate code in mapDispatchToProps() for the common case where action creator arguments match the callback prop arguments.
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.
We will learn how to change the address bar using a component from React Router.
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.
We will learn how to display the loading indicators while the data is being fetched.
We will learn how to wait until the item is created on the server, and update the corresponding local state.
We will learn how to reduce the syntactic noise in the action creators and components when using arrow functions.
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.
We will learn how to better separate the code in the entry point to prepare it for adding the router.
We will learn about fake backend module that we will be using throughout the next lessons to simulate data fetching.
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.
We will learn how to normalize the state shape to ensure data consistency that is important in real-world applications.
We will learn how to add React Router to a Redux project and make it render our root component.
Learn how to keep code maintainable and self-documenting by extracting action creators from the components.
Learn how to use container’s own props inside the mapStateToProps() and mapDispatchToProps() functions.
Learn how to inject dispatch() as a prop into a React component by using connect() from React Redux library.
Learn how to write mapStateToProps() and mapDispatchToProps() functions and use connect() from React Redux library to generate container components.
Learn how to use the Provider that comes with React Redux instead of the hand-rolled implementation from the previous lesson.
Learn how to make the store object available to all components by using the advanced React feature called “context”.
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.
Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components.
Learn how to separate the looks from the behavior by extracting presentational components.
Learn how to create a React todo list application using the reducers we wrote before.
Learn how to build a reasonable approximation of the combineReducers() utility in 15 lines. No magic!
Learn how to use combineReducers() utility function to generate a reducer from several other reducers instead of writing it by hand.
Learn the fundamental pattern of building maintainable Redux applications: reducer composition, and how it can be used to update properties of an object.
Learn the fundamental pattern of building maintainable Redux applications: the reducer composition, and how it can be used to update items in an array.
Learn how to implement toggling a todo in a todo list application reducer.
Learn how to implement adding a todo in a todo list application reducer.
Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects.
Learn how to avoid mutating arrays using concat(), slice(), and the ES6 array spread operator.
Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.