Flux vs Redux

Madhu M
Madhu M
Jul 27, 2017 · 3 min read

React is on the leading UI framework right now. It has been widely used in the web or mobile(thanks to react-native). We can create react apps with/without Flux/Redux or any other architecture patterns. Here we will see the what is Flux and Redux and how it differs from each other.

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code

Flux Flow

What is Flux ?

Flux means, here we are talking about the Facebook implementation of Flux.

Flow in Flux — , From the view layer which are components in react- sends an action to dispatcher. Dispatcher emits an event which the store’s catch. The store’s check whether it has some thing to do with that action. If yes, then it do the process and it emits a event. The components will be listening to the store event emits. If it has registered with a store and the corresponding event, then it catches that event and does its job assigned to it.

Points to note in flux are:

It can have multiple stores

Components are told to watch for an event from stores

What is Redux ?

Redux is a predictable state container for JavaScript apps.

From image above, you can see the flow in Redux.

Flow in Redux — , Form view Actions are sent to Reducer. Reducer is the place which is similar to store in Flux(not exactly), where it checks whether any function to be done with that action. If yes, then it does the action and changes the state. In redux state is immutable(meaning it cant be changed), so we create a brand new state for the whole application. Redux has on single state for the application. The state is connected to the components through the store. When the state changes it will re render the components, so these components does not need to listen for a store event. It will get re-rendered with the new state.

Single store

Immutable state

No need to re-render application on event emit by store

Diff between Flux and Redux?

Flux has multiple stores, where Redux with single store(but multiple reducers). The difference is in the state management. In redux, state is immutable so we create new state. But flux we can have different states for different components(where it makes messy). Redux has single state for whole application. That helps us manage the app efficiently.

In Flux Components has to listen to a store events, in redux components update itself with the state change. Redux easier to handle the application state. Redux has the upper hand over flux for its implementation and easy to use style.

As a developer, i have worked in both Flux and Redux with different projects. I started with Flux first then used Redux. So Redux seemed to be easy for me. Both has similar, and same learning curve. Its up to the developer to choose which to use.

Madhu M

Written by

Madhu M

Technology Lead

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade