Redux – End to End
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Redux – End to End to your Wishlist.

Add to Wishlist

Redux – End to End

A practical look at Redux, from the ground up, and from front end to back.
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7 students enrolled
Created by Packt Publishing
Last updated 9/2017
English [Auto-generated]
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • The basics of the webpack bundling system
  • Creating a React app with webpack
  • Building isomorphic React apps with Redux
  • Building a node express API
  • Secure API authentication
  • Maintaining a session on the client
  • Redux datatables and forms with validation
  • Reusable Redux code
View Curriculum
  • Working knowledge of JavaScript is a must. Familiarity with data binding on the front end and object relational management on the back end are strongly recommended. Our project starts from scratch, but it moves along quickly and does not dwell on the basics.

Redux completes the missing piece of the React framework, and is used at the core of React for most complex React projects. In this course, we’ll be focusing on leveraging the Redux framework to impose better engineering on React applications. Redux is an implementation of FLUX, which is a pattern for managing application state in React. Redux brings a clean and testable design to the table using a purely functional approach.

In this course will build an app piece by piece, starting with a minimal webpack application and quickly transforming it into an isomorphic Redux application with full API integration, including secure authentication.

About the author

Sam Slotsky is a software engineer and saxophonist originating from Sioux City, IA. He attended the University of Iowa for Computer Science and Music and is currently employed by Ackmann & Dickenson, Inc. of Minneapolis, specializing in back-end web applications, databases, and JavaScript. Additionally, Sam has authored and contributed to open source packages for use with the React, Redux, Knockout, and Meteor framework. Cooking and playing chess are his favorite pastime activities.Husband and father of three, he writes software programs during the day, cooks in the evening, listens to jazz obsessively, and has a bit of a thing for cycling.

Who is the target audience?
  • This is for people who want to really explore the ins and outs of real world Redux applications.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
26 Lectures
A Tale of Two Clients
6 Lectures 42:03

This video provides an overview of the entire course.

Preview 03:02

Learn how to use the webpack bundler and supporting loaders to build a React application.

Building and Compiling a React Application

In this video, we’ll learn how to the working of data binding mechanisms in React.

One Way Data Flow in React

In this video, we will create an Express application and use it to serve our React client.

Serving React Apps from Express

In this video, we’ll learn how to add SASS to our build chain.

Loading SASS Modules

One chief disadvantage to single page apps is that they’re less accessible to search engines. Using isomorphic rendering gives you full searchability and a performance boost as well.

Isomorphic Rendering
Data Management
4 Lectures 44:38

When state management becomes complex, it becomes less practical for components to handle it. Redux offers a testable and predictable implementation of the FLUX pattern.

Preview 11:51

We need to ensure consistency between the client and the server side rendering code when computing the virtual DOM. When adding Redux to the mix, this includes keeping the application state consistent as well.

Isomorphic Redux

An API without data is like a restaurant without food. Knex provides a thin wrapper around sql that will get our tables populated in no time.

Database Access with Knex

Sometimes we need to do more than just read or write data. Object relational managers provide higher level abstractions as well as features like model validation and eager loading of associated data.

Object Relational Mapping with Bookshelf
4 Lectures 42:32

Like any app, ours needs a way to for users to login. Authenticating an API should be both secure and painless.

Preview 07:17

Expanding the auth scheme to accept cookies can make it easier for browser based clients to stay logged in, but it introduced a CSRF risk that must be protected against.

Cookies and CSRF Tokens

The application UI needs a form so users can submit their credentials to the API. 

Building a Login Form

With a cookie, the server knows the user is authenticated, but the client does not. 

Staying Authenticated
3 Lectures 23:40

Deciding which screen to show based on application state is a problem for everyone. We need a client side router to map URL’s to our different screens.

Preview 10:07

Anything we introduce on the client must also work with SSR. We can accomplish this by using the static router.

Isomorphic Routing with React-router

Users should be able to click a button to logout of the application in order to protect their online security.

Logging Out
Redux CRUD Administration
3 Lectures 31:23

There can’t be data management without data. Any CRUD API needs endpoints to create new records.

Preview 08:36

Client side validation can enhance the user experience by preventing most invalid data from getting to the server.

Building a New Customer Form with Validation

All applicable validation checks should be run on the server, without exception. Validating the submission on the client should not be considered sufficient.

Incorporating Backend Validations
Reusing Redux Code
3 Lectures 34:48

CRUD applications typically contain list views for the resources being managed. Use Redux and react to retrieve, store, and display data in a table to be browsed.

Preview 08:44

An API should limit the number of records it returns to prevent performance problems. Flipping through pages of list data is a common interface for browsing records from the API.

Redux Pagination

Similar Redux logic must often be applied in multiple places. Avoid repetition by learning how to safely reuse actions and reducers.

Reusing Actions and Reducers
Best Practices
3 Lectures 29:27

To really get the most out of server side rendering, the data your page needs can be loaded before the client renders.

Preview 11:45

As an application evolves, we need to maintain confidence that our code does what we think it does. Writing unit tests for the most complex parts of an application is essential to ensuring long term quality.

Testing Redux Code

Dynamic languages are powerful but easy to abuse. Adding static type checking to your JavaScript can help ensure that your code is used the way it’s intended.

Type Checking JavaScript
About the Instructor
Packt Publishing
3.9 Average rating
8,175 Reviews
58,756 Students
686 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.