Learning Redux
3.6 (4 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.
46 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Redux to your Wishlist.

Add to Wishlist

Learning Redux

Take your web applications to the next level by leveraging the power of Flux architecture using the Redux framework
3.6 (4 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.
46 students enrolled
Created by Packt Publishing
Last updated 3/2017
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Boost your productivity with the latest client technologies
  • Build rich client applications with quality engineering principles
  • Understand Flux and get to know the ins and outs of Redux
  • Solve problems using nothing but reducers, actions, and components
  • Save time and code by discovering the libraries that solve the most common problems
  • Connect the boundary of your client application with well-defined server communication
  • Find out how to test asynchronous action creators and reducers
  • Develop confidence in your code quality and your ability to refactor when all your code is thoroughly tested
View Curriculum
  • This is an in-depth course where we’ll be focusing on leveraging the Redux framework to impose better engineering on React applications. Users are expected to have a working knowledge of node.js, webpack, and at least one data binding framework, ideally React. It's also helpful to have a basic understanding of one-way data flow, which is the key principle behind the FLUX architecture

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.

The course begins with the basics of React development, where you will get a better understanding of how React applications are organized compared to other JavaScript applications. Then you will learn the principles of the Flux architecture before diving into one of its most popular implementations: Redux. You’ll build a simple React application and rewrite it with Redux. By the end of this section, our Redux code will be doing all the work so that our React components can be strictly presentational.

Moving on, we’ll turn our simple client into a single page application. We’ll use react-router to allow different URLs to render different pages, and you’ll see how to break up our application state into groups of related data. We’ll focus on retrieving lists of records from the server and paginating them, starting by leveraging the Redux framework to implement our own pagination. Then we’ll replace most of the code we’ve written so far, with a third-party package that neatly solves the problem of form submission for us.

After that, you’ll submit the form with axios, use react-router to redirect on success, and leverage toastr to display error notifications. Finally, we’ll rip out most of our code and replace it with a popular library that’s built to manage form state. At the end, you will focus on testing different libraries for our React components, and then test our asynchronous action creators and reducers.

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 favourite pastime activities.

Who is the target audience?
  • This course is apt for developers who are looking for a concise dive into the fundamentals, those seeking to get to the meat of building real-world, rich client applications with Redux, and anyone in between.
Compare to Other Redux Framework Courses
Curriculum For This Course
21 Lectures
Implementing the FLUX pattern with Redux
4 Lectures 24:23

This video gives overview of the entire course.

Preview 02:47

Understanding the fundamental components of a client application is essential to success in modern frameworks. 

The Anatomy of a Client Application

As React applications grow, there arises a clear need for a consistent and scalable way to manage your application state. The standard way to achieve this is to follow the FLUX pattern.

Understanding FLUX

Before diving into building applications with Redux, we should get a fundamental understanding of how we implement and organize different concerns.

Introducing Redux
Building Applications with Redux
3 Lectures 14:55

Take an existing React client and turn it into a Redux application.

Preview 03:10

A large FLUX application has lots of actions being dispatched from many places in a deep component tree, making bugs difficult to track down. Redux DevTools will help light the way.

Watching the Dispatch Log

As reducers grow, using a switch statement becomes harder to maintain, and immutability becomes harder to enforce.

Divorcing the Switch Statement
Designing Single Page Apps
3 Lectures 13:58

Writing a single-page app means using nothing but JavaScript to update the page when navigation links are clicked. It's worth it to see what it takes to do this yourself before reaching for a more robust, pre-made solution.

Preview 03:13

As a single-page app acquires more pages, managing them all in the same location becomes impractical.

Organizing the Application State

A home-cooked routing implementation might do the trick early on, but it gets hard to manage when things get more complex, and there's no need to reinvent a perfectly good wheel.

Switching Pages with ReactRouter
Paginating Server Data
4 Lectures 28:29

We want to retrieve data from the server in a consistent and reliable way. Promises provide a much better abstraction for this than the traditional callback model.

Preview 07:11

After fetching data, the next step is to display it. Apps will often have multiple list views or grid views with a consistent look and feel across them all. It's therefore helpful to have an easy and reusable way to display lists of records.

Displaying Datatables in React

Pagination is one of the most common problems to occur in a user interface. We can make it simple and straightforward by leveraging Redux.

Implementing Basic Pagination Controls

Pagination is easy to implement in Redux, but a fully featured library will prevent you from writing the same code in multiple projects.

Introducing Violet-Paginator
Submitting Forms
4 Lectures 23:12

Almost every web client has forms, and JavaScript libraries offer different solutions for submitting them via AJAX. In react-redux, we solve it like any other problem: with components, actions, and reducers.

Preview 04:45

Asynchronous form submission is another way by which single-page apps can improve on user experience. Leverage Redux and other libraries to elegantly handle both success and failure scenarios.

Form Submission, Redirection, and Error Handling

Forms in Redux are easy, but we don't want to rewrite the code with every new project. ReduxForm is a library that uses a reducer to manage our form state for us.

Introducing ReduxForm

To improve user experience, we want to prevent submission of invalid data as much as possible. ReduxForm allows you to specify a validate function, which returns information indicating which fields have errors.

Client-Side Validations in ReduxForm
Testing React-Redux Applications
3 Lectures 17:48

All aspects of a react-redux app can and should be tested. React's in-house utilities for testing components leave some things to be desired. Enzyme.js provides a simple and powerful interface to get your components properly covered.

Preview 06:03

In redux, our actions contain a great deal of our application logic, making them extremely important to test. But asynchronous actions that make API calls can also be somewhat tricky to tackle.

Testing Asynchronous Action Creators

A great deal of the logic in a Redux application is found in the reducers, making them absolutely crucial to test. Fortunately, this is very easy to achieve due to the pure functional nature of Redux.

Testing Reducers
About the Instructor
Packt Publishing
3.9 Average rating
8,197 Reviews
58,902 Students
687 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.