Home > Store

Using Redux with React LiveLessons (Video Training)

Using Redux with React LiveLessons (Video Training)

Your browser doesn't support playback of this video. Please download the file to view it.

Online Video

Register your product to gain access to bonus material or receive a coupon.

Description

  • Copyright 2019
  • Edition: 1st
  • Online Video
  • ISBN-10: 0-13-565998-1
  • ISBN-13: 978-0-13-565998-4

5+ Hours of Video Instruction


Web applications of today are becoming increasingly more complex. Our apps commonly need to request data from various sources and handle rich user interactions, which can become difficult to keep track of as our apps scale. Luckily, if you are using the React framework, there are many ways to solve these problems.


React has emerged as the industry standard for JavaScript frameworks. With more than 3 million weekly downloads from the NPM package manager–and heavy usage by leading companies such as Google, Microsoft, Netflix, Twitter and so many more–React is a leading framework. Learn how to unlock the power of React with the Redux library to provide creative solutions and highly flexible web components.


In larger applications, many developers and teams lean on Flux-style architectures, such as those implemented by the Redux library, which have proven to be highly scalable and easily testable. Instructor Dave Lunny covers how you can develop successful web applications with these powerful technologies.


Description


In this 5 hour LiveLesson, Dave Lunny provides a deep dive into the concepts behind Flux-based architectures like Redux, showing how to use unidirectional data patterns to help simplify your web applications. Lunny uses a mix of screen casting, slides, and personal narrative to cover modern development patterns, demonstrating how to solve state management issues that can arise–such as higher-order components, render props, and context.


Skill Level

  • Beginning-Intermediate

What You Will Learn

  • How to simplify the way data flows through applications
  • A full understanding of the concepts behind Flux-style architecture and how to think in Redux

  • Exciting concepts to help make components more flexible

  • A keen understanding of the overarching concept behind Redux and how the library fits into a modern front-end JavaScript stack

  • How to use Redux with React

  • Advanced React patterns, such as higher-order components, render props, and the Context API

Who Should Take This Course

  • Web Developers
  • Javascript developers


Course Requirements


Pre-requisites:

  • A working knowledge of modern JavaScript (ES6+), as well as some basic CSS/HTML knowledge.
  • Understanding of common web development best practices, specifically the benefits of building reusable UI components.
  • Intermediate knowledge of the React JavaScript framework.

About Pearson Video Training


Pearson publishes expert-led video tutorials covering a wide selection of technology topics designed to teach you the skills you need to succeed. These professional and personal technology videos feature world-leading author instructors published by your trusted technology brands: Addison-Wesley, Cisco Press, Pearson IT Certification, Prentice Hall, Sams, and Que. Topics include: IT Certification, Network Security, Cisco Technology, Programming, Web Development, Mobile Development, and more. Learn more about Pearson Video training at  http://www.informit.com/video.

Video Lessons are available for download for offline viewing within the streaming format. Look for the green arrow in each lesson.


Sample Content

Table of Contents

Introduction


Lesson 1: Introduction to Managing Application State in JavaScript
1.1 Understand the need for state management in JavaScript
1.2 Think about web apps as simplified state trees
1.3 Conceptualize unidirectional data flow

Lesson 2: Describing State Changes with Redux Actions
2.1 Write a Redux action
2.2 Build an action creator
2.3 Increase reusability by storing action types
2.4 Dispatch an action


Lesson 3: Updating the State Using Redux Reducers
3.1 Understand pure functions
3.2 Initialize your state
3.3 Respond to actions
3.4 Simplify by using the actionsMap pattern
3.5 Break up reducers with combineReducers
3.6 Testing your reducers


Lesson 4: Understanding and Using Redux Store
4.1 Understand the difference between ‘state’ and ‘store’
4.2 Initialize a store
4.3 Reading state and dispatching actions
4.4 Subscribe to state changes


Lesson 5: Redux + React
5.1 Separate presentational and container components
5.2 Use Provider to provide store to your component tree
5.3 Connected components: Using mapStateToProps to access state
5.4 Connected components: Using mapDispatchToProps to dispatch actions from components
5.5 Reduce boilerplate with state selectors
5.6 Improving performance by using ownProps


Lesson 6: Advanced Redux Concepts
6.1 Explore common middlewares
6.2 Write custom middleware
6.3 Handle asynchronous actions using thunk middleware
6.4 Debug your app with Redux DevTools


Lesson 7: React Compound Components
7.1 Build a simple tabs component: Introduction
7.2 Make static namespaced components
7.3 Use React.Children to share state


Lesson 8: React Higher-order Components
8.1 Understand higher-order functions in JavaScript
8.2 Rebuild our simple tabs component using higher-order components
8.3 Wrap the component displayName
8.4 Handle data fetching using a higher-order component
8.5 Forward DOM refs


Lesson 9: Render Props
9.1 Provide rendering control to the consumer
9.2 Rebuild our simple tabs component using render props
9.3 Learn the children-as-a-function pattern
9.4 Use prop-getters to assist in sharing props
9.5 Conceptualize shadow components
9.6 Implement state reducers to provide more power to component consumers


Lesson 10: Context API
10.1 Familiarize ourselves with the Context API
10.2 Update context and subscribing to changes
10.3 Apply themes to our application using context
10.4 Differentiate when to use context and when to use Redux
10.5 Replace existing Redux code with Context API


Lesson 11: Hooks API
11.1 Use the state hook
11.2 Use the effects hook
11.3 Understand when not to use hooks
11.4 Write custom hooks
11.5 Rebuild our tabs component using hooks
11.6 Explore some third-party hooks


Summary

Updates

Submit Errata

More Information

Unlimited one-month access with your purchase
Free Safari Membership