Redux Basics

What's included?

Video Icon 1 video File Icon 1 file Text Icon 47 text files


Start Here
Pure Redux Basics Guide (PDF)
518 KB
Video: Redux Essentials
Redux + React in 10 minutes
11 mins
Should You Use Redux?
Is Redux still a good idea?
Learn React Before Redux!
The Benefits of Redux
One-way Data Flow in Plain React
Passing Data Multiple Levels is a Pain
Passing Data Between Siblings
Use React-Redux to Connect Data to Any Component
Redux Alternatives
The React Context API
Use the children prop!
Learn Redux, Starting with React
Start with a Counter
-->> Follow Along!
Add Redux to the React App
Install redux and react-redux
redux vs. react-redux: what's the difference?
The Redux Store
One Global Store
Create the Redux Store
The Store Needs a Reducer
What is a Reducer?
Give the Reducer an Initial State
What is a Redux Action?
How Redux Dispatch Works
Handle Actions in the Redux Reducer
Keep Reducers Pure
Reducers Must Be Pure Functions
All These Rules...
How to Use Redux with React
Wrap the app with the React-Redux Provider
How the Provider Works
Prepare the Counter Component for Redux
How to Use React-Redux Connect
Connect the Component to Redux
How connect() Works
How mapStateToProps Works
Why not pass the whole state?
Dispatch Redux Actions from a React Component
Dispatch Redux Actions from a React Component
Try this! Add a Reset Button
Action Constants
What is an Action Constant?
Action Creators
What is an Action Creator?
How to Use Action Creators
What is mapDispatchToProps?
Use redux-thunk to Fetch Data
Why we need Redux-Thunk
What is a "thunk"?
How to Setup Redux Thunk
Fetching Data With Redux
Write a Thunk Action to Fetch Data
Dispatch the Action to Fetch the Data
How to Name Your Redux Actions
Handle Actions in the Reducer
Display the Data in a Component
Can You Avoid the Double Render?
Error Handling
Handling Errors with Redux
Where to Go From Here
Further Resources