Fullstack React - Chapter 10 Notes

Summary

This post contains notes from chapter 10 in Fullstack React - "Intro to Flux and Redux". The purpose of this chapter is to learn how Redux works so we can have a foundation on which to build on in subsequent chapters that discuss using Redux when building a React application.

Overview 

In...

Why Flux

• Flux decouples the state from the view / components
• Eliminates the need for "top-level" components to manage shared state
• React components are simpler because they no longer try to manage state

What is Redux

• Flux is a design pattern and Redux is a popular implementation of that design pattern.
• Some of the key concepts behind Redux are:
• All of your application's data is in a single-data structure call the "state", which is held in the "store"
• Your app reads the state from this store.
• The state is never mutated directly outside of the store.
• Views emit actions that describe what happened
• A new state is created by combining the old state and the action by a function called the reducer.

Redux Flow

The flow of a Redux applications looks like this:

• View emits an action
• Redux store receives the action and calls a reducer function(s) to process the action
• The reducer function updates the state
• The store notifies any listeners that the state has been updated
• Views refresh / re-render themselves