Pure Redux
- Buy now
- Learn more
Introduction

Welcome to the Course!
What is Redux? What's it for?
The Basics

Start with a Plain React App
Add Redux to the React App
Your Turn: Add Redux
Redux Core Concepts

Actions
Exercise: Step Counter
How the Reducer Works
Exercise: Write Some Reducers
Immutability in Practice

What is Immutability?
Why Immutability Matters to Redux
How to Immutably Update Arrays
Exercise: Immutable Arrays Practice
How to Immutably Update Objects
Exercise: Immutable Objects Practice
Useful Extras

Easier debugging with Redux DevTools
Exercise: DevTools Practice
Make API calls with redux-thunk
Exercise: redux-thunk Practice
Easy immutability with Immer
Exercise: Try Immer
Testing

How to Test a Reducer
Exercise: Test This Reducer
How to Test Plain Action Creators
Exercise: Test These Action Creators
How to Test Async (thunk) Actions
Exercise: Test These Thunk Actions
Real World Example

Create the OfCourse App
Use a form to get data into Redux
Set up an API server
POST new records with redux-thunk
Exercise: Handle the BEGIN and ERROR actions
Proxy requests to the API server
Fetch the list of courses
Exercise: Add the Price field
Add a "New Course" Button
Add Routing and a CourseDetailPage
Fetching courses from the server
Style the CourseDetailPage
Add Lessons to a Course
Save Lessons to the Server
Split the Reducers and Use combineReducer
Implementing Selectors with reselect
Exercise: Write a getCourseById Selector
Exercise Solution - getCourseById selector
Fetch Lessons when route changes
Edit Lesson Titles and Persist Them
Delete Lessons from a Course
Create LessonPage and link the lessons
Edit lesson contents as Markdown
Preview the lesson markdown as HTML
Fix the Error Handling in api.js
Create LoginPage, signup and login
Save the JWT Token with Middleware
Redirect after login
Save the user in localStorage
Logging out, and the LoginLogout button
Hiding components based on role
Let users buy courses at the SalesPage

Real World Example

In this module we'll put together a larger app using everything you've learned so far, and learn a few new techniques along the way.

We're building courseware, much like this Podia platform you're using right now.

In this app we'll touch on:

A quick and easy way to set up an API server for development
Using redux-thunk and GET/POST/PUT/DELETE calls to do CRUD operations
How to proxy API requests to a server in development mode
Gathering data with a modal dialog
Using Reach router to implement accessible routing between pages
Fetching data when a route loads
Splitting data into multiple Redux reducers
User authentication with React and Redux
How to protect routes based on role (anonymous vs. admin vs. user)

32 Lessons