Learning Redux [Video]

Learning Redux [Video]

This video is included in a Mapt subscription
Sam Slotsky

Take your web applications to the next level by leveraging the power of Flux architecture using the Redux framework
$0.00
$106.25
$29.99p/m after trial
RRP $124.99
Subscription
Video
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Video Details

ISBN 139781787125810
Course Length2 hours 2 minutes

Video Description

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.

Style and Approach

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

Table of Contents

Implementing the FLUX pattern with Redux
The Course Overview
The Anatomy of a Client Application
Understanding FLUX
Introducing Redux
Building Applications with Redux
Integrating Redux
Watching the Dispatch Log
Divorcing the Switch Statement
Designing Single Page Apps
Toggling Views the Hard Way
Organizing the Application State
Switching Pages with ReactRouter
Paginating Server Data
Fetching Data with Axios
Displaying Datatables in React
Implementing Basic Pagination Controls
Introducing Violet-Paginator
Submitting Forms
Managing Form State in Redux
Form Submission, Redirection, and Error Handling
Introducing ReduxForm
Client-Side Validations in ReduxForm
Testing React-Redux Applications
Testing Components with Enzyme
Testing Asynchronous Action Creators
Testing Reducers

What You Will 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

Authors

Table of Contents

Implementing the FLUX pattern with Redux
The Course Overview
The Anatomy of a Client Application
Understanding FLUX
Introducing Redux
Building Applications with Redux
Integrating Redux
Watching the Dispatch Log
Divorcing the Switch Statement
Designing Single Page Apps
Toggling Views the Hard Way
Organizing the Application State
Switching Pages with ReactRouter
Paginating Server Data
Fetching Data with Axios
Displaying Datatables in React
Implementing Basic Pagination Controls
Introducing Violet-Paginator
Submitting Forms
Managing Form State in Redux
Form Submission, Redirection, and Error Handling
Introducing ReduxForm
Client-Side Validations in ReduxForm
Testing React-Redux Applications
Testing Components with Enzyme
Testing Asynchronous Action Creators
Testing Reducers

Video Details

ISBN 139781787125810
Course Length2 hours 2 minutes
Read More

Read More Reviews

Recommended for You

Learning React Application Development with Redux and Node.JS [Video] Book Cover
Learning React Application Development with Redux and Node.JS [Video]
$ 106.25
Universal JavaScript with React, Node, and Redux [Video] Book Cover
Universal JavaScript with React, Node, and Redux [Video]
$ 106.25
Learning Scala Web Development [Video] Book Cover
Learning Scala Web Development [Video]
$ 63.75
Taming Big Data with MapReduce and Hadoop - Hands On! [Video] Book Cover
Taming Big Data with MapReduce and Hadoop - Hands On! [Video]
$ 68.00
Reinforcement Learning Techniques with R [Video] Book Cover
Reinforcement Learning Techniques with R [Video]
$ 106.25