O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using Redux with React LiveLessons Video Training

Video Description

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.

Code available for download here: Using React with Redux Codes Examples

Table of Contents

  1. Introduction
    1. Using Redux with React LiveLessons Video Training: Introduction 00:03:33
  2. Lesson 1: Introduction to Managing Application State in JavaScript
    1. Learning objectives 00:00:27
    2. 1.1 Understand the need for state management in JavaScript 00:03:25
    3. 1.2 Think about web apps as simplified state trees 00:02:12
    4. 1.3 Conceptualize unidirectional data flow 00:02:45
  3. Lesson 2: Describing State Changes with Redux Actions
    1. Learning objectives 00:00:25
    2. 2.1 Write a Redux action 00:02:51
    3. 2.2 Build an action creator 00:03:01
    4. 2.3 Increase reusability by storing action types 00:02:33
    5. 2.4 Dispatch an action 00:02:54
  4. Lesson 3: Updating the State Using Redux Reducers
    1. Learning objectives 00:00:31
    2. 3.1 Understand pure functions 00:02:49
    3. 3.2 Initialize your state 00:04:52
    4. 3.3 Respond to actions 00:04:45
    5. 3.4 Simplify by using the actionsMap pattern 00:05:11
    6. 3.5 Break up reducers with combineReducers 00:04:14
    7. 3.6 Testing your reducers 00:06:05
  5. Lesson 4: Understanding and Using Redux Store
    1. Learning objectives 00:00:24
    2. 4.1 Understand the difference between state and store 00:01:28
    3. 4.2 Initialize a store 00:02:54
    4. 4.3 Reading state and dispatching actions 00:04:23
    5. 4.4 Subscribe to state changes 00:07:06
  6. Lesson 5: Redux plus React
    1. Learning objectives 00:00:30
    2. 5.1 Separate presentational and container components 00:03:32
    3. 5.2 Use Provider to provide store to your component tree 00:12:02
    4. 5.3 Connected components: Using mapStateToProps to access state 00:08:10
    5. 5.4 Connected components: Using mapDispatchToProps to dispatch actions from components 00:06:11
    6. 5.5 Reduce boilerplate with state selectors 00:06:20
    7. 5.6 Improving performance by using ownProps 00:15:30
  7. Lesson 6: Advanced Redux Concepts
    1. Learning objectives 00:00:29
    2. 6.1 Explore common middlewares 00:02:34
    3. 6.2 Write custom middleware 00:05:23
    4. 6.3 Handle asynchronous actions using thunk middleware 00:12:46
    5. 6.4 Debug your app with Redux DevTools 00:04:46
  8. Lesson 7: React Compound Components
    1. Learning objectives 00:00:25
    2. 7.1 Build a simple tabs component: Introduction 00:01:39
    3. 7.2 Make static namespaced components 00:03:13
    4. 7.3 Use React.Children to share state 00:06:58
  9. Lesson 8: React Higher-order Components
    1. Learning objectives 00:00:26
    2. 8.1 Understand higher-order functions in JavaScript 00:03:34
    3. 8.2 Rebuild our simple tabs component using higher-order components 00:10:50
    4. 8.3 Wrap the component displayName 00:03:09
    5. 8.4 Handle data fetching using a higher-order component 00:06:41
    6. 8.5 Forward DOM refs 00:04:48
  10. Lesson 9: Render Props
    1. Learning objectives 00:00:29
    2. 9.1 Provide rendering control to the consumer 00:02:06
    3. 9.2 Rebuild our simple tabs component using render props 00:05:59
    4. 9.3 Learn the children-as-a-function pattern 00:03:14
    5. 9.4 Use prop-getters to assist in sharing props 00:03:02
    6. 9.5 Conceptualize shadow components 00:03:31
    7. 9.6 Implement state reducers to provide more power to component consumers 00:05:29
  11. Lesson 10: Context API
    1. Learning objectives 00:00:25
    2. 10.1 Familiarize ourselves with the Context API 00:02:49
    3. 10.2 Update context and subscribing to changes 00:03:08
    4. 10.3 Apply themes to our application using context 00:08:49
    5. 10.4 Differentiate when to use context and when to use Redux 00:02:02
    6. 10.5 Replace existing Redux code with context 00:08:40
  12. Lesson 11: Hooks API
    1. Learning objectives 00:00:26
    2. 11.1 Use the state hook 00:03:42
    3. 11.2 11.2 Use the effects hook 00:02:53
    4. 11.3 Understand when not to use hooks 00:01:53
    5. 11.4 Write custom hooks 00:02:28
    6. 11.5 Rebuild our tabs component using hooks 00:05:13
    7. 11.6 Explore some third-party hooks 00:01:58
  13. Summary
    1. Summary 00:01:53