Understanding Data Flow: Comparing Redux, MobX, RxJS, and Recoil

1. What is a Data Flow

What is a flow?

In mathematics, a flow formalizes the idea of change over time; for our purposes, a flow is a collection that responds to temporal changes.

What is a data flow?

Based on that definition, a data flow is a set of data that changes over time. In MVVM front‑end development, data equals the page, so a data flow can be viewed as a collection of page changes—essentially business logic.

This is not a formal definition, just a thought starter.

2. Current Front‑End Data Management Patterns

Three Major Approaches

Functional, immutable, pattern‑based. Typical implementation: Redux.

Reactive, dependency tracking. Typical implementation: MobX.

Reactive, implemented as streams. Typical implementations: RxJS, xstream.

Redux Pattern

Redux is commonly used as a global state manager, providing a protected data store independent of components. It can be seen as a protected global Context.

It offers data protection via dispatch + reducer, ensuring traceability and isolating side effects.

Pros and Cons:

Advantages: data isolation, traceable changes.

Disadvantages: difficult to shrink for small apps; action methods can bloat.

Business concerns: large projects may suffer from unclear store design and hard‑to‑modify logic.

MobX Pattern

MobX treats data as a source; when data changes, computed state updates the page automatically. It binds data and components, providing automatic subscription and publishing.

Although actions exist, side‑effect separation is not enforced, making personal control less friendly.

Stream (RxJS) Pattern

RxJS can split and combine data nodes, similar to breaking Redux state into many observable nodes that can be computed into new nodes.

It lacks the strict action contract of Redux but defines change boundaries via entry nodes. RxJS separates all data sources, leaving only pure logic and pure functions.

Advantages: low cost of splitting observable nodes, high readability.

Disadvantages: complex data splitting, redesign, high learning cost.

Recoil

Recoil, recommended by Facebook, introduces atoms (primitive data) and selectors (derived data) based on an immutable model. Atoms are independent; selectors derive relationships, aligning with reactive‑stream ideas.

It fits React well, acting like a memoized Context, allowing read‑only and write‑only APIs for optimal rendering.

The three previous data‑flow approaches each have strengths in different scenarios.

3. Ideal Source‑Data Programming

Relationships Between Data

Data does not appear from nowhere; it can generate new data. Applying the principle of minimal viable data and divide‑and‑conquer aids development and maintenance.

Source data can be defined as the initial data that originates from user interaction; derived data comes from transformations such as API responses.

Defining Source Data

From a component perspective, consider two paradigms:

Interface‑oriented programming : data originates from backend APIs, leading to long data‑processing chains.

Data‑oriented programming : focus on component state; any incoming data is rendered directly.

In practice, user‑driven data (e.g., filter selections) can be treated as source data, while API‑returned lists are derived data.

Redux Data Model Limitations

Redux lacks a clear hierarchy, causing the store to become a large undifferentiated pool, and it cannot easily describe relationships between data, conflicting with the minimal viable principle.

Reactive Stream Data Model

Each node can derive new nodes, but changes propagate only from the initial source node. The flat structure allows flexible composition, improving readability and reducing splitting cost.

No fixed data hierarchy; discrete data can be freely defined and combined.

Logical flow converges despite flexible data composition.

Scope Comparison of Redux and RxJS

Summary

Different patterns suit different scenarios: Redux offers quick setup and stable changes; MobX provides reactive updates; RxJS enables pure functional logic with stream‑based data flow.

Separating view and logic lets data drive the UI, simplifying overall control.