React, Redux, and Redux Saga With Symfony 3

In the previous series we built a backend API for handling user registration, login, and profile management.

Whilst having an API for these features is nice, it's a little much to expect the vast majority of our customers to work directly with an API. Instead, we must also provide a front end to put a GUI / friendly user interface over the API.

You are, of course, free to use pretty much any technology stack you desire to do this. My personal favourite front end stack is React, with Redux for managing application state, and Redux Sagas for managing side effects.

Whilst I fully understand the frustrations and reluctance to continually learn all the new shiny things released in the JavaScript community, the tech stack in this series is, in my opinion, a fairly solid foundation for the next few years in real-world JavaScript projects. I say this with some confidence as I personally work with enterprise clients moving to React / Redux / Redux Sagas.

The application we are going to build in this series can serve as the basis for many applications - from side projects, to SaaS apps, to many other kinds of web applications.

We will build a site with the following features:

  • a registration form
  • a login form
  • a page to view and update your user profile
  • add the ability to update your current password
  • restricted pages - e.g. must be logged in to view the profile page
  • unprotected pages

This course is designed for PHP / Symfony developers who wish to learn about React / Redux / Redux Sagas, whilst still working with Symfony on the back end.

You will still find this course useful if you have an existing back end API, though will have to adapt the error handling section to your own implementation. This should be as simple as writing your own implementation of the error handler.

The buzzwords covered in this series include:

  • Symfony 3 RESTful API
  • React
  • Redux
  • Redux Sagas
  • React Router
  • Redux Form
  • JavaScript ES6
  • Async / Await

And a whole bunch more.


# Title Duration
1 App Walkthrough - User Experience 03:15
2 App Walkthrough - Developer Experience 07:41
3 Development Environment Setup 06:34
4 Login - Part 1 09:15
5 Login - Part 2 07:55
6 Login - Part 3 12:37
7 Login - Part 4 10:22
8 Login - Part 5 08:00
9 Saving Redux State to Local Storage 08:50
10 Logout 10:57
11 Adding an Auth-aware NavBar 14:43
12 Cleanup, Linting, and Login Form Styling 09:58
13 Showing Spinning Icons, Because Why Not? 08:11
14 More Robust Request Tracking 09:07
15 Getting Started Testing With Jest 06:43
16 Testing Request Reducer - Part 1 11:35
17 Testing Request Reducer - Part 2 05:25
18 Testing AuthSaga - Happy Path 09:19
19 Testing AuthSaga - Unhappy Paths 04:38
21 Testing JavaScript's Fetch with Jest - Happy Path 05:15
21 Testing JavaScript's Fetch with Jest - Unhappy Paths 04:35
22 Getting Started with Jest Mocks 08:52
23 Using Webpack Environment Variables in Jest Tests 09:37
24 User Profile Page - Part 1 07:31
25 User Profile Page - Part 2 10:25
26 User Profile Page - Part 3 07:23
27 Change Password - Part 1 10:01
28 Change Password - Part 2 07:59

Code For This Course

Get the code for this course.

Share This Course

If you have found this course helpful, please share it.

Presented by

Christopher Moss

Christopher Moss

Hi, I'm Chris and welcome to In this video you will learn about... :)