Why do we need Flux with React?

Question

I don't understand why we need Flux with React as React itself let's us maintain the state of the application. Every component has an initial state and the state can be changed by user actions or any other asynchronous JavaScript.

Why is React called as only a view library when it can let's us define state of the application and also update view whenever state changes. This is not what a view does....its what complete MVC does right?

For example: here is an Todo app build only with React and here is an Todo app build with Flux and React.

If we can build the Todo app with React only then why do we need Flux?

Typhus

Answer 1

You don't NEED Flux the same you don't need MVC. They are both architectures and you can of course build something without using either.

Would you build a non-MVC app in 2016? Probably not, that doesn't mean that people didn't do it in the past.

Flux is awesome! But as most things in the tech industry is not always the right decision, things vary in a project requirement basis.

Probably the biggest selling point of Flux is that it tries to enforce the data flow in one direction, this means that you know for sure where the data is coming from. In a non-flux app the data for a component could be an own property, a property passed down the component tree, a local state variable, a state variable result of calling an API.

With Flux: "where does the data come from?". Answer: from the stores. Redux takes this further and only uses a single store.

Flux has been criticized because you need a lot of boilerplate code but again is a matter of tradeoffs.

At the end is always your call depending on your project needs.

Barilla

Why is React called as a view library even if it can handle application state? – Typhus

Because it was conceived to only display data. The data can change over time and facebook needed a way to render that changing data efficiently, so the purpose of the state was to track those changes. Not for you to have an entire database like structure – Barilla

Besides it doesn't enforce how you manage your data (Backbone collections, localstorage, local state, etc), the react component itself is interested in rendering your data, not how that data ended up there. – Barilla

Agreed. Another point here is maintenance. Though initially I felt the same. But as my project grew in size components in numbers, I realized importance of flux. Where you are keeping actions and stores separately which is also useful while debugging. – Bicipital

Answer 2

In theory you don't need flux. In small applications you don't need flux for sure. But what if your application consist of hundreds components? And one of your component is form. User populate this form and you send its content to server. And get response from server with new data. And assume that this response data and data from form are necessary to other components.

1. Without flux: You can move your data to root component and then distribute it down to all components. But if you need to distribute data from many other components too? This makes your application very complex.

2. with flux: You move your data to stores, and all components which are interested about this data, can get it from there. You have better control on your application and source data.

I prefer redux (only one store and one source of truth)

edit:

Why is React called as a view library even if it can handle application state?

MVC is a software architectural pattern. It divides a given software application into three interconnected parts (models, views, controllers). If we think about react and MVC it fit as View. But this is nothing wrong. It doesn't mean that you can use it only for views. It allows you to create normal applications.

But in other hand you can use it as view for other frameworks (for example you can use it with angular).

In other words it is very flexible library for many uses.

Delusive

Why is React called as a view library even if it can handle application state? – Typhus

It seems to me, that handling application state in react components is a sort of a useful side effect. If you are writing a view, you need to keep some state information, like visibility of elements, state of radio buttons and check boxes etc. So a good view library should provide some way to do this. But once that functionality is available, nobody prevents you from storing your whole application state the same way. It might be awkward, but certainly possible. – Velamen

@MadWombat I like your explanation. Even in react page there is this "React approaches building user interfaces differently by breaking them into components. This means React uses a real, full featured programming language to render views". They made it very flexible, possibly they even not plan to use it as full functional framework. – Delusive

Generally I like libraries, frameworks which allow you to compose your app of them. I don't like monoliths – Delusive