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.
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.