In this article, I will provide a conceptual overview of React application state management using the Flux implementation library, Redux.
What is state?
The description above refers to component level state in React. Each component has its own state, and data is passed between components as props, generally wrapped with callback functions. This can work fine for less complex applications, but eventually this type of architecture can become cumbersome. A single user interaction can cause multiple changes to the DOM, and the internal logic for managing the state of numerous components may cause a parent level component to become complex and unwieldy.
Facebook, the creators of React, quickly recognized the need for application level state, a state object available to all of the components in an app. And thus, Flux was born.
Flux is a design pattern, like its predecessor at Facebook, Model-View-Controller (MVC).
Unlike MVC, Flux uses a strict uni-directional data flow model, mirroring, to some extent, the flow of data through the branches of the DOM node tree. The Flux design pattern is made up of four parts.
User interactions with the DOM
actions that describe what happened to the
dispatcher, which, in turn, update the state in the
store. Changes to the store re-render the DOM continuously, as user interactions repeatedly trigger the behaviors described above.
Facebook has an open-source library for their implementation of Flux, but over time, numerous alternative libraries have been developed. Of these, Redux has become the most the popular, with an extensive development and support community.
Single source of truth The state of your whole application is stored in an object tree within a single store.
State is read-onlyThe only way to change the state is to emit an action, an object describing what happened.
Changes are made with pure functionsTo specify how the state tree is transformed by actions, you write pure reducers.
Instead of the dispatcher, Redux makes use of reducers. A reducer (also called a reducing function) is a function that accepts an accumulation and a value, and returns a new accumulation.
In Redux, the accumulated value is the state object, and the values being accumulated are actions. Reducers calculate a new state given the previous state and an action, following a core Flux concept:
(state, action) => state
Array.prototype.reduce(), is doing, is crucial to being able to make use of Redux.
According to the Redux webpage glossary, reducers are the most important concept in Redux. React and Redux offer innovative new ways of creating and managing the flow of data in the DOM, and represent the future of web-based application development.