Mastering Flux and Redux

Redux is one of the most popular JavaScript libraries of all time, according to GitHub, and it's all based on Flux. This course will teach you all levels of Flux and Redux implementation.
Course info
Rating
(113)
Level
Beginner
Updated
Feb 24, 2017
Duration
3h 1m
Table of contents
Course Overview
Course Introduction
Introduction to Flux and Redux
Understanding Flux Fundamentals
Building an Application with Flux
Building Advanced Applications with Flux
Understanding Redux
Building Applications with Redux
Implementing Asynchronous Redux
Conclusion
Description
Course info
Rating
(113)
Level
Beginner
Updated
Feb 24, 2017
Duration
3h 1m
Description

At the core of any solid web application is an effective and well-managed data model. In this course, Mastering Flux and Redux, you'll learn the skills and technologies necessary to manage your application's data model in extremely efficient and standards-compliant ways. First, you'll learn all about the popular data-modeling libraries Flux and Redux; their differences and similarities, how they relate to one another, and which is appropriate for what kind of projects. Next, you'll apply what you've learned in four modules packed with hands-on demos where you will build a 3-part Flux and Redux application featuring a message board, a TodoMVC page, and a control panel. Then, you'll explore the skills needed to create any Flux or Redux application, modeling changes with actions, and developing idempotent functions for reducers. Finally, you'll create Redux stores with reducers and middleware, combining reducers, using and implementing a dispatcher, and much more. When you're finished, you'll have a deep understanding of both Flux and Redux, allowing you to implement them for any project you choose, integrate seamlessly into any workplace project employing either of these technologies, and get started towards developing your own implementations and middleware.

About the author
About the author

Daniel Stern is a freelance web developer from Toronto, Ontario who specializes in Angular, ES6, TypeScript and React. His work has been featured in CSS Weekly, JavaScript Weekly and at Full Stack Conf in England.

More from the author
Vue.js: Big Picture
Beginner
1h 6m
Aug 31, 2018
Testing React Applications with Jest
Intermediate
3h 36m
May 11, 2018
Isomorphic React
Intermediate
2h 44m
Jan 11, 2018
More courses by Daniel Stern
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, I'm Daniel Stern, also known as the code whisperer, and welcome to my course, Mastering Flux and Redux. I am a web developer and contributor to the open source community, authoring many notable libraries, including the widely used Angular Audio Module, and the popular tool, Range. CSS. In addition to having numerous other courses here on Pluralsight, Redux is among the 30 fastest growing libraries on GitHub, which makes sense considering that it revolutionizes the way your web applications manage data. In this course, we're going to learn both Flux and Redux, building on the lessons learned from Flux to truly understand and use Redux effectively. Some of the major topics we will cover include building applications with Flux, building applications with Redux, understanding unidirectional data flow, modeling changes to application state with actions, and creating reducers using pure functions. By the end of this course, you will be able to build an application independently using Flux or Redux, or integrate into any workplace project already implementing these technologies. Before beginning this course, you should be familiar with HTML, JavaScript, ES6, and Node. js. From here, you should feel comfortable diving into Flux and Redux with courses on building React applications with Redux, creating Redux middleware, and building Flux applications. I hope you'll join me on this journey to learn Flux and Redux, with the Mastering Flux and Redux course at Pluralsight.

Course Introduction
Hello, and thank you for choosing Mastering Flux and Redux. I am Daniel Stern, and I'll be your instructor for this course. I have many years of experience writing JavaScript and Node. js code, so I hope you'll find this course as interesting to watch as I found it interesting to create. In this video, we'll take an overview of what's to come in this chapter. First, we'll take an overview of the course, a broad look at what will be included and what technologies you'll know by the end of this course. We'll review what we will and won't be covering, so if you're concerned that this course may overlap with knowledge of technologies that you already have, you're going to want to have a close look at this video. Next, we'll take a close look at who this course is designed for and who will benefit most from watching it. I've tried to make this course broadly applicable to all those except the very most advanced students, so I recommend you have a quick look at this video to make sure that it applies to you. Next, we'll take a detailed roadmap of the chapters that are going to come in this course, what we're going to learn, and the order these topics are going to come. If you're the kind of person who likes to stay organized, then this is the video for you. Finally, we'll look at what the prerequisites are before starting the course, what technologies will you need to know and what softwares will you need to be familiar with. This will be discussed in the prerequisites video. Alright, in the next video we'll be taking an overview of the course.

Understanding Flux Fundamentals
Welcome to the next module in Understanding Flux and Redux. This module, entitled Understanding Flux Fundamentals, is all about understanding Flux. Before we can build an application with Flux, we have to understand what the principles are that went into making it, and how it works. In this chapter, we'll be discussing the following things. First, we're going to touch of Flux basics; what is Flux, what's the rationale behind it, and where can it be used? We'll discuss unidirectional data flow, which is a one-way means of transferring data that Flux uses to manage the data that's put into it. We'll talk about the Flux Dispatcher, which is the part of a Flux application that other components use to send messages to different parts of the application. We'll talk about Flux Stores, which is the part of the Flux application that any component can go to, to get a relevant part of the data model that's up to date. Next, we'll discuss the ReduceStore. The ReduceStore is very similar to the regular Flux store, but it's more advanced and will prepare us for learning Redux in the second half of this course. Finally, we'll learn about idempotency, or function purity. Idempotency is an important concept for any programming application, but it's extra important for ReduceStores or Redux, since they only work with these kind of functions. In the following module, we'll be implementing all these things, so it's important to pay attention now to gain a good understanding. In the next lesson, we'll begin discussing the basics of Flux.

Building an Application with Flux
Hello and welcome to the next module, Building an Application with Flux. In this module, we'll be building an application using the Flux framework which we'll also implement. To get the most out of this module, you'll need to code along at home. But first, let's look at what we'll be covering in this module. First, we'll take an overview of the application that we're building, then we'll install the necessary dependencies to make the application, we'll set up a development environment that will allow us to write ES6, we'll go into some troubleshooting techniques that you'll be able to apply for this entire course, we will implement a dispatcher, which as we've learned is part of Flux, we will also implement stores, we'll create actions which we'll use to represent changes to our data model, we'll implement a ReduceStore based on the store that we've created, and finally, we'll learn to undo actions in our ReduceStore. In the next clip, we'll go over installing basic dependencies.

Building Advanced Applications with Flux
Before we get started, let's take a look at what we'll be covering in this module. We'll be implementing a ReduceStore by building on what we've already created with the regular Flux store. We'll be creating a reducer that will fit in to the ReduceStore. This reducer will fit the template of the reducers we'll be using in Redux, and probably the reducers you'll be using in any future projects you do. We'll find out how to correctly copy the state, rather than mutate it, which will prevent any unexpected errors in our application. Finally, we'll learn how to undo actions by reverting to previous states. It should be a challenging module, so we hope you'll stick with us.

Understanding Redux
Hello and welcome to this module entitled Understanding Redux. In this module, we'll learn and apply almost everything there is to know about the library Redux. In this video, we'll have an overview of everything that we're going to learn in this module. We'll have a look at the application we'll be building, the scenario that makes it necessary to use Redux. We'll ask and answer the question what is Redux? We'll have a look at the relationship between Flux and Redux, we'll discuss and demystify the four terms state, actions, stores, and reducers. Finally, we'll have a short lesson about immutable state. So, in the next video we'll have a look at our scenario overview.

Building Applications with Redux
Hello and welcome to this module entitled Building Applications with Redux. In this module, we'll be constructing a message board component to our application. The message board will use Redux to manage its state, so it should be a great opportunity to learn Redux and how it works. Here's what we'll be covering in this module. First, we'll go over the procedure for scaffolding the application, then after we've installed Redux, we'll implement a Redux store for our application to hold its state. We'll create a reducer for our store that updates our application state in response to actions. And finally, we'll combine multiple reducers into a single reducer to increase simplicity and reduce the chance of object mutation. First, let's preview the messenger service. If you're coding along at home, just click out the branch redux-start for the messenger service stub that we're going to start with. Here we are at the Message Board that we'll be building in the next two modules. As you can see, it displays a list of messages that users have posted. I can type a new message, and submit it. Notice there's a slight delay between when I submit it and when it appears. This is the asynchronous component we'll be adding in the next module. If I update the status, to Offline, I can no longer interact with this input component, so these two components are going to have to share data in some way. If I choose a different status, then the message input returns to normal. So, that's the Message Board. In the next clip, we'll get started on the scaffolding.