React Redux Tutorial

  1. Home
  2. React
  3. React Redux Tutorial

Tags: React

Walkthroughs on advanced React v16.6.3 and Redux v4.0.0 - Authentication, Testing, Middlewares, HOC's, and Deployment

Last updated 2022-01-10 | 4.5

- Build a scaleable API with authentication using Express
- Mongo
- and Passport
- Learn the differences between cookie-based and token-based authentication
- Figure out what a Higher Order Component and how to use it to write dramatically less code

What you'll learn

Build a scaleable API with authentication using Express
Mongo
and Passport
Learn the differences between cookie-based and token-based authentication
Figure out what a Higher Order Component and how to use it to write dramatically less code
Write Redux middleware from scratch to uncover what is happening behind the scenes with Redux
Set up your own testing environment with Jest and Enzyme
Realize the power of building composable components

* Requirements

* Solid understanding of React
* Intermediate understanding of Redux; you should have knowledge of reducers
* actions
* and action creators

Description

Knowledge of React + Redux is 100% required! If you are familiar with reducers and action creators you will be fine.

Course includes content specific to React v16.6.3 and Redux v4.0.1! For React v14, start with the section titled "Testing with React v14"

This is the tutorial you've been looking for to take your React and Redux skills to the next level.

Authentication with Express/Mongo?  Yes!  Middleware/Higher Order Components? We got it.  Testing with Mocha/Chai?  It's here!

This course wastes no time diving right into interesting topics, and teaches you the core knowledge you need to deeply understand and build React components and structure applications with Redux.

Mastering React and Redux can get you a position in web development or help you build that personal project you've been dreaming of. It's a skill that will put you more in demand in the modern web development industry, especially with the release of Redux and ReactNative.

There are dozens of great tutorials online for React and Redux, but none of them teach the challenging, core features of these two fantastic libraries.  I created this course to push you beyond "just getting started."

  • Learn how to thoroughly test React and Redux code, including tests for action creators and reducers

  • Get familiar with Higher Order Components.  Don't know what they are?  No problem, you have been using them without even knowing it!

  • Rewrite a popular Redux Middleware from scratch to handle asynchronous actions

  • Become a master of the trickiest topic in Javascript: authentication.  You will write a server with enterprise-grade authentication from scratch that can scale to hundreds of thousands of users.  No shortcuts, no dummy data.

I have built the course that I would have wanted to take when I was learning React and Redux.  A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.


Who this course is for:

  • Programmers with experience on React and Redux
  • NOT for programmers with no previous React/Redux experience!

Course content

12 sections • 242 lectures

Welcome! Let's Get Started! 3 lectures

Introduction Preview 01:46

Get an introduction to this course.  We'll focus on the critical aspects of React and Redux.

Course Resources Preview 00:38

Join Our Community! Preview 00:07

Testing 64 lectures

npx Create React App Generation Preview 00:21

Project Generation Preview 02:05

Our First Test Preview 03:51

Introduction to Jest Preview 03:43

App Overview Preview 02:01

Installing Dependencies Preview 00:44

React and Redux Design Preview 02:44

What Do We Test? Preview 04:24

Starting from Scratch Preview 02:48

Rendering the App Preview 04:07

Showing Components in the App Preview 03:16

Valid Test File Names Preview 03:31

Test Structure Preview 03:56

Tricking React with JSDOM Preview 07:52

Verifying Component Existence Preview 04:11

Test Expectations Preview 04:11

Limiting Test Knowledge Preview 06:13

Enzyme Setup Preview 07:25

Enzyme Renderers Preview 06:19

Expectations for Component Instances Preview 07:06

Exercise Time! Preview 01:18

Expecting the Comment List Preview 01:56

Update for Handling Absolute Imports Preview 00:22

Absolute Path Imports Preview 05:00

Code Reuse with BeforeEach Preview 04:25

Comment Box Component Preview 03:16

TextArea Implementation Preview 05:08

CommentBox Test File Preview 03:22

Getting an Empty ReactWrapper in your console.log? Preview 00:10

Asserting Element Existence Preview 06:48

AfterEach Statements Preview 04:02

Simulating Change Events Preview 05:15

Providing Fake Events Preview 06:35

Forcing Component Updates Preview 03:55

Retrieving Prop Values Preview 04:19

Form Submit Exercise Preview 02:08

Exercise Solution Preview 06:41

Describe Statements Preview 06:18

Redux Setup Preview 04:30

The Provider Tag Preview 05:00

The SaveComment Action Creator Preview 04:11

Bonding React with Redux Preview 03:57

Redux Test Errors Preview 06:56

Adding a Root Component Preview 07:36

Testing Reducers Preview 05:21

Handling Unknown Types Preview 02:46

Testing Action Creators Preview 05:31

Comment List Wireup Preview 04:34

Getting Data Into Redux Preview 04:55

Redux Initial State Preview 07:51

Cheerio Queries Preview 08:29

One More Feature Preview 03:51

Fetching a Remote Resource Preview 04:37

Parsing Comment List Preview 05:08

Integration Tests Preview 03:31

Integration Tests in Action Preview 03:03

Fixing a Broken Test Preview 02:30

Simulating Button Clicks Preview 03:04

Why the Failure? Preview 04:32

Faking Requests with Moxios Preview 05:58

The Reason for Failure Preview 02:47

Introducing a Pause Preview 06:55

Moxios's Wait Function Preview 02:43

App Wrapup Preview 02:01

Higher Order Components 14 lectures

An Introduction to Higher Order Components Preview 01:42

Connect - A Higher Order Component Preview 01:58

App Overview Preview 04:30

Adding React Router Preview 01:45

Adding Routes Preview 03:34

Auth Reducer Preview 05:04

Rendering a Header Preview 04:05

Wiring Up State Preview 04:18

Changing Auth State Preview 03:47

Steps for Building a HOC Preview 06:29

Forced Navigation with React Router Preview 04:27

Creating the HOC Preview 10:06

Placing Reusable Logic Preview 03:26

Passing Through Props Preview 09:10

MIddlewares with Redux 12 lectures

Introduction to Middlewares Preview 02:30

The Purpose of Redux Promise Preview 09:04

How Async Middlewares Work Preview 08:33

Crazy Middleware Syntax Preview 08:42

Forwarding Actions Preview 04:06

Waiting for Promise Resolution Preview 05:57

Observing the Middleware Preview 07:02

State Validation Middleware Preview 04:34

JSON Schema Preview 05:13

Generating JSON Schema Preview 04:13

Middleware Creation Preview 06:08

Emitting Warnings Preview 05:52

Server Setup - Authentication 27 lectures

Introduction to Authentication Preview 04:32

Cookies vs Tokens Preview 04:57

Scalable Architecture Preview 04:49

Server Setup Preview 03:45

More Server Setup Preview 05:41

Express Middleware Preview 06:29

Express Route Handler Preview 06:09

Mongoose Models Preview 10:22

MongoDB Setup Preview 06:29

Inspecting the Database Preview 06:19

Authentication Controller Preview 04:57

Searching for Users Preview 07:57

Creating User Records Preview 06:31

Encrypting Passwords with Bcrypt Preview 08:12

Salting a Password Preview 06:16

JWT Overview Preview 04:58

Creating a JWT Preview 07:13

Installing Passport Preview 05:50

Passport Strategies Preview 08:55

Using Strategies with Passport Preview 04:02

Making an Authenticated Request Preview 05:55

Signing in with Local Strategy Preview 05:37

Purpose of Local Strategy Preview 04:17

Bcrypt Full Circle Preview 05:08

Protecting Signin Route Preview 04:12

Signing Users In Preview 04:04

Server Review Preview 02:39

Client Side Auth 29 lectures

Client Overview Preview 03:25

Lib Installs Preview 01:49

The App Component Preview 03:51

Creating the Header Preview 06:02

Wiring Up React Router Preview 05:23

Scaffolding the Signup Form Preview 04:37

Including Redux Preview 07:45

ReduxForm for Signup Preview 06:27

Handling Form Submission Preview 05:05

Wiring Up Middleware Preview 02:16

Basics of Redux Thunk Preview 09:20

Calling the API Preview 05:01

Code Cleanup with Compose Preview 05:50

CORS in a Nutshell Preview 11:21

Solution to CORS Errors Preview 05:26

Dispatching Actions Preview 04:04

Displaying Auth Errors Preview 05:16

Redirect on Signup Preview 02:37

Feature Component Preview 02:28

The Require Auth HOC Preview 04:02

Reference - HOC Code Preview 00:12

Persisting Login State Preview 04:54

Signing Out a User Preview 04:20

Automatic Sign Out Preview 02:26

The Signin Component Preview 02:14

The Signin Action Creator Preview 02:35

Updating the Header Preview 03:20

Header Styling Preview 03:09

Auth Wrapup Preview 02:55

Testing With React v14 24 lectures

Note Preview 00:08

Project Setup Preview 03:29

Project setup for our first React and Redux project.

A First Spec Preview 12:42

Testing of React applications is critical.  In this section we'll write our first test.

Core Testing - Describe, It, Expect Preview 09:39

Purpose of Describe, It, and Expect

Solidify your knowledge

Test Reporting Preview 04:05

Test Structure

Solidify your knowledge.

Feature Mockups Preview 06:09

Test Structure Setup Preview 06:55

Comment Box Tests Preview 08:19

Testing Class Names Preview 07:50

Using beforeEach to Condense Tests Preview 06:22

Expecting Child Elements Preview 05:13

Simulating Events Preview 07:24

Testing React and Redux apps must include simulating user input, like clicking or typing.

Testing Controlled Components Preview 07:23

With React, controlled components get their value set by state.

Form Submit Event Preview 07:13

Simulating change events isn't enough with React testing, we must also simulate form submit events as well.

Stub Comment List Preview 06:00

Expectations on Content Preview 07:43

Assertions with Lists Preview 05:42

Testing Action Creators Preview 09:34

React and Redux's action creators can be tested as plain functions.

Action Creator Shortcuts Preview 04:47

TDD Comments Reducer Preview 12:37

Spec Failures After Code Change Preview 03:36

App Review Preview 03:07

Test Environment Setup with React v14 9 lectures

Purpose of Chai and Mocha Preview 05:19

Test Helper From Scratch Preview 02:43

JSDom Setup Preview 07:14

JSDOM is a browser simulation library for testing React and Redux apps.

More JSDom Setup Preview 05:28

TestUtils Library Preview 07:53

Defining RenderComponent Preview 07:52

Finishing RenderComponent Helper Preview 05:12

Simulate Helper Preview 07:09

Test Helper Review Preview 03:08

Higher Order Components with React v14 14 lectures

What is a Higher Order Component? Preview 03:06

Connect and Provider Preview 05:49

Authentication HOC Overview Preview 04:19

Higher Order Components enable fantastic code reuse with React.

Header Setup Preview 06:54

React Router Setup Preview 07:36

Authentication Reducer Preview 07:05

Action Creator Hookup Preview 08:04

Authentication Higher Order Component Preview 04:57

HOC Scaffold Code Preview 09:09

Nearly all React Higher Order Components end up looking identical.

Nesting Higher Order Components Preview 04:48

Accessing React Router on Context Preview 05:30

Class Level Properties Preview 02:12

Handling HOC Edge Cases Preview 05:03

Higher Order Components Review Preview 03:05

Middleware with React v14 12 lectures

Middleware Overview Preview 03:26

App Building Plan Preview 03:50

Users Reducer Preview 04:14

Static Users Action Creator Preview 02:15

Rendering a List of Users Preview 07:32

CSS Cleanup Preview 04:20

Pains Without Middleware Preview 07:15

Middleware Stack Preview 04:43

Middleware Internals Preview 07:55

Handling Unrelated Actions Preview 05:17

Handling Promises Preview 08:05

Middleware Review Preview 06:50

Client Side Authentication with React v14 33 lectures

Client Setup Preview 02:28

App Architecture Preview 05:48

Component and State Design Preview 07:30

Header Component Preview 04:17

Scaffolding the Signin Form Preview 11:03

Adding Signin Form Preview 05:58

Action Creator with Many Responsibilities Preview 08:22

Introducing Redux Thunk Preview 07:10

Signin Action Creator Preview 10:38

CORS In a Nutshell Preview 09:13

Serverside Solution for CORS Preview 06:16

Programmatic Navigation Preview 07:11

Updating Auth State Preview 06:29

Breather and Review Preview 05:39

LocalStorage and JWT Preview 06:39

Auth Error Messaging Preview 04:36

Displaying Errors Preview 04:40

Header Logic Preview 10:29

Signout Component Preview 05:32

Signout Action Creator Preview 04:45

Signup Component Preview 04:12

Signup Form Scaffolding Preview 08:02

Redux Form Validation Preview 04:30

Implementing Validation Logic Preview 09:28

More On Validation Preview 05:40

Signup Action Creator Preview 07:11

Finish Up Signup Preview 08:55

Securing Individual Routes Preview 10:21

Root IndexRoute Preview 02:34

Automatically Authenticating Users Preview 07:11

Making Authenticated API Requests Preview 08:01

Handling Data from Authenticated Requests Preview 05:13

Authentication Wrapup Preview 03:29

Extras 1 lectures

Bonus! Preview 00:25