Your React app is ready to ship. Congratulations! Packaging for production is (and should) be different from your development configuration. In the case of Create React App the toolchain is rich, includes development productivity conveniences such as hot reloading, source maps and custom environment variables. This toolchain is mind blowingly productive as you develop the app, npm start and watch the magic unfold. At this point, its possible to put the React app one big (~1.
Once you start working with React in anger, there is a tipping point to be aware of where: the complexity of data flows piles up the same data is being rendered in multiple places the number of state changes blow out Being able to tackle these problems in a single place is where Redux fits in. Contents Contents The Problem Option 1 lift the state Option 2 react context Option 3 Redux A chat with redux Container vs Presentation Components The Redux Principles Actions The Store Immutability Reducers React-Redux React-Redux Provider React-Redux Connect mapStateToProps mapDispatchToProps Redux Setup Async and APIs Mock API API Client Wrappers Redux Middleware Redux Async Libraries Thunks Conditional mapStateToProps Polish (the finer things) Spinner component Status API and feedback Server side validation Client side validation Optimistic deletes Testing Redux Connected Components Action Creators Thunks Reducers Store The Problem Imagine a fairly deep component hierarchy, starting with your top level App component.
Development environment Boilerplate Webpack Babel NPM scripts ESLint Production dependencies Development dependencies JSX Components all teh things DOM control Styling Rendering Lists Handling Events State Management Option 1: Binding Option 2: Arrows Passing Parameters Component Composition Passing Data Passing Children (passing down JSX) Three Rules about State Raising and Handling Events between Components Passing Object props Controlled Components Synchronising Components Stateless Functional Components Destructuring Data (Arguments) Functional components Class components Life cycle Hooks Phase 1 the birth phase (mount) Phase 2 the update phase Phase 3 the death phase (unmount) Effects (hooks) Debugging React Router Testing Jest React Test Utils Enzyme Production Redux store config Webpack Setup npm scripts Troubleshooting Development environment Install Node.