BT

Redux: An Architectural Style Inspired by Flux

| by Abel Avram Follow 9 Followers on Nov 21, 2015. Estimated reading time: 2 minutes |

Redux uses a unidirectional data flow similar to Flux, but it has a single store which is changed by cloning the original store and applying some functions without side effects. There is no Dispatcher.

Redux is an application architecture inspired by Facebook Flux and Elm. Like in Flux, in Redux data flow is unidirectional in order to simplify the application architecture and make it simpler to reason about. Unlike Flux, there is a single store in Redux, containing the state for the entire application. The store is organized in a tree of objects, and it is immutable. Every time the state needs to change, a new object tree is created, incorporating the data from the previous state plus what is changed. A change is triggered when an action is dispatched to the store. The action is a simple object containing the type of operation to be executed and some payload. The change is performed by reducers which are pure functions with no side effects, and take as arguments the previous state and an action. They return the new state resulting from applying the action.

The store is not a class but an object accompanied by a few methods. The store is created by executing the root reducer on the initial state of the application. To expand the application, one adds additional reducers. Each reducer takes care of a branch of the state tree. Redux offers a method for combining reducers into one to be able to make a single call used when the store is created.

Unlike Flux, there is no central Dispatcher in Redux. When an action needs to be executed then the dispatch() method of the store is called, passing the action as parameter. Then all listeners are informed the state has changed, and they have the option to get the new state and render the corresponding components accordingly.

While Redux can be used with any JavaScript framework to build applications, it is a normal fit for React because this framework let’s one “describe UI as a function of state” and Redux’ focus is to safely perform updates to the state based on various actions.

Flux has known a continuous stream of commits until it reached version 2.1.0 in August, with little improvements in the last three months. The GitHub repository indicates 125 issues were closed so far with only 15 still open. They are a few minor enhancement requests, some issues are related to documentation, a few are questions, and one is a bug report. Flux seems pretty stable right now with little new on the horizon unless Facebook is working on something behind the scenes.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT