Flux / Redux

Unidirectional Data Flow.

“Action -> Dispatcher -> Store -> View”

Predictable state container.

graph LR
    View -->|Action| Dispatcher
    Dispatcher -->|Action| Store
    Store -->|State Change| View

When to use

  • React Applications: The default.
  • Complex State: When multiple parts of UI need the same data.

Explanation

Problem

MVC is bidirectional and can lead to cascading updates (Model A updates View B which updates Model C…).

Solution

Force data to flow in one direction. Views create Actions. Actions update the Store (Reducer). Store updates the View.

Pros and Cons

Pros Cons
  • Predictable (Time travel debugging)
    		•
  • Boilerplate
    		•
  • Centralized State
    		•
  • Complexity
    		•

    Code example

    Typescript