Understanding React, Flux, and Redux: A Front‑End Architecture Guide

React

React is a view‑layer framework for rendering UI. It focuses on componentization, one‑way data flow via props, view updates based on state changes, and using a virtual DOM to improve rendering performance.

Componentization

One‑way data flow with props

View updates based on state changes

Virtual DOM for performance

State changes are typically triggered by user interactions on the page. Each component has a setState method to modify its state, but as applications grow, managing the relationship between state and view becomes complex. To centralize state management, the Flux architecture was introduced.

Flux

Flux is an application architecture that can be used with React or other frameworks. It maintains one or more Store objects (similar to MVC models) that hold all application data. When an event occurs, Flux processes the event, updates the Store, and the root component (controller view) retrieves the new Store data, updates its state, and propagates the new state down through React’s one‑way data flow.

Flux consists of four parts: Dispatcher, Store, View, and Action. The Dispatcher acts as a central hub, receiving Actions and distributing them to Stores. Stores respond to relevant Actions, emit change events, and controller‑views listen for these events to fetch updated data and re‑render. Using Flux allows actions to be described centrally, simplifying testing.

Redux

Redux serves the same purpose as Flux but implements it differently. Key differences include:

1. Single store Redux consolidates multiple stores into a single store, with state derived from this store. Update logic resides in pure reducer functions rather than within stores.

2. No Dispatcher Redux replaces the Dispatcher with reducers, pure functions of the form (previousState, action) => newState. Multiple reducers can be combined via combineReducers into a root reducer that maintains the complete state tree. When an action is dispatched, the store calls the appropriate reducer, which returns a new state that flows to the view.

The main distinction is that Flux’s stores operate independently, notifying their specific controller‑views, whereas Redux’s reducers are unified under a root reducer, ensuring all state changes pass through a single, predictable pathway.

Flux store diagram:

Redux store (reducer) diagram:

Note: This overview is based on the author’s recent experience with React and may contain inaccuracies; feedback is welcome.