Complex to Simple: Redux and Flux architecture for beginners

Flux Architecture

Flux — is an architectural pattern developed by Facebook for working with React. It ensures a one-way data flow, making the application state more predictable and easier to track.

Unlike the familiar Context-based flow, Flux introduces a more structured approach with additional elements:

• Action: An object that contains the type of action and the necessary data for modifying the state. Actions describe what happened but not how the state will change.
• Dispatcher: A central hub that distributes actions to the appropriate stores.
• Store: Holds the application state and the logic for modifying it. Unlike Context, a store doesn’t just store data — it also defines how it can be changed.
• View: Displays data from the Store and dispatches Actions when the user interacts with the interface.

How Data Updates Work:

1. The user interacts with the View (e.g., clicks a button).
2. The View creates an Action and sends it to the Dispatcher.
3. The Dispatcher forwards the Action to all registered Stores.
4. The Store updates its state based on the Action received from the Dispatcher.
5. The Store notifies the View about the state change.
6. The View retrieves the updated data from the Store and re-renders.

A logical question arises: what if we have multiple Views, and we want to share data from “View #1” with “View #2” ? The answer is simple — we must go through the full cycle of the one-way data flow.

In other words, direct data transfer from View #1 to View #2 is not allowed and will not be used!

Redux

Redux is a state management library that implements the Flux architecture.

Key Features of Redux:

• Single Store — The entire application state is stored in a single object.
• Read-Only State — State cannot be modified directly.
• State Changes via Pure Functions (Reducers) — Updates happen through reducers, which are pure functions that take the previous state and an action, then return a new state. Since applications can have multiple states, we can have multiple reducers. A simple analogy: Reducers work similarly to useState(), where a setter updates the previous state.
• One-Way Data Flow — Changes always follow a predictable pattern.

Practical Example: Creating a Redux Application

Let’s go step by step and build a simple application with multiple states.

1. Setting Up the Project

2. Organizing Files

A good practice is to place Redux-related code in a separate folder:

3. Creating the Store

The Store is the heart of Redux — it holds all the application states.

Unlike React Context, where you can create multiple separate contexts for different parts of the state, Redux uses a single store for all states.

4. Connecting Redux to the Application

Just like with React Context, we need to wrap our application in a Provider and pass the store we created earlier as a prop. Key concepts from the store:

Press enter or click to view image in full size

• observable — An object that watches for state changes and notifies other parts of the app when updates occur.
• dispatch — A function that triggers reducers.
• getState — To get data from the store, we use the getState function, which might return something like { counter: 1, theme: "light" }.

A Reducer is a pure function that takes the current state and an action, then returns a new state.

Important: A reducer must always return a new state and should never modify the existing one. A reducer must have a default value for the initial state. Otherwise, we may encounter an error like:

Finally, don’t forget to import the reducer into our store.

6. Creating Selectors

We will create two components:

• DisplayCounter — Displays the current counter value.
• CounterControls — Contains buttons to increase or decrease the counter.

First, we define the counterSelector function and pass it into the useSelector(counterSelector) hook. 

Selectors are functions that extract specific data from the state.

7. Defining Actions

In the CounterControls component, we update the state using the useDispatch(incrementCounter()) hook. 

Actions are simple objects with a type field that describes what happened in the application. For example, our action types will be:

• "INCREMENT"
• "DECREMENT"

8. Using Redux in the Application

Once everything is set up, we can integrate Redux into our app and see how the state updates in action!

How Does Redux Work?

Let’s break down what happens when a user clicks the “+1” button:

1. The user clicks the “+1” button.
2. The onIncrement function is triggered, which dispatches an action: { type: “INCREMENT” }
3. Redux sends this action to counterReducer, since the action is related to the counter state.
4. The counterReducer detects the "INCREMENT" action type and returns a new state (state + 1).
5. Redux updates the state in the store.
6. All components using useSelector(counterSelector) receive a notification about the state change.
7. The DisplayCounter component re-renders with the updated counter value.

This is the one-way data flow in Redux!

Redux in Real Life

To better understand Redux, imagine it as an emergency response system:

• Store → The dispatch center that keeps track of all incidents.
• Actions → Emergency calls reporting incidents.
• Dispatch → The actual call to 911.
• Reducers → The specific emergency responders (firefighters, ambulance, police) that handle only their type of incident.
• Selectors → The methods used to retrieve information from the dispatch center.

Benefits of Redux

1. ✅ Predictability — State changes only through actions and reducers, making the flow consistent.
2. ✅ Centralization — All application state is stored in a single place.
3. ✅ Debugging — Every state change can be tracked.
4. ✅ Testing — Reducers are pure functions, making them easy to test.
5. ✅ Caching — The state can be saved and restored between sessions.

When Should You Use Redux?

Redux is especially useful when:

• You have multiple states used across different parts of the app.
• State update logic is complex.
• Many developers are working on the same project.
• You need to track every state change.
• You want to persist state across page reloads.

Resources

• React Context Usage Example
• React Redux Usage Example

Conclusion

Now You Know Redux! As you can see, by breaking it down into parts and gradually implementing it into your application — plus adding some automation — you can make your app more reliable and free from unnecessary complexities!