Flux, Vuex Are Wrong and Outdated

The takeaway

With Flux, Vuex comes access restriction — the state can only be changed via the methods. It is useful if we change global state from completely different places. Global state stores authentication, pages (tabs), snackbar, etc. The pages constitute 90 percent of global state and continue to grow. Most pages are only changed from their own component — the same place, so that restricting access to every single variable and property is beyond stupid. The author of Redux, patient zero, admitted it:

1. https://twitter.com/dan_abramov/status/1191487232038883332
2. https://twitter.com/mwattsun/status/1191495005132558336
3. https://twitter.com/newplagiarist/status/1191518412226215936
4. https://twitter.com/VereNickJohnson/status/1191488216857300993

Flux is just another epidemic. All Flux libraries must be deleted from npm and GitHub, homepages must be shut down. How long will beginners continue to stumble on it???

name is a string. What if a property is an object or array? You want me to map every single method from Array.prototype.*? And then repeat it for a second array property? For all arrays? What if a property is an array of objects or etc.? Can you imagine using Vuex in a BIG and COMPLEX application??? A programmer becomes a writer.

How should I program?

1. Organize global state as follows:

2. Change authentication, snackbar, etc. via methods

3. Change pages directly

4. Use a shorthand in the component of a page

5. Put as much data in global state as possible because:

  1. Progress and input data won’t be lost when switching between pages
  2. And even when refreshing a page if you add saving and loading, for example, with localStorage
  3. Many other advantages

Put the methods and the watchers of a page in its own component. There is no point to keep them in global state as Flux, Vuex do, because they will NEVER be used by other components.

Why Flux looks suspicious

1. As simple as count++ becomes:

2. Imagine if local state were:

An overkill, complicated, verbose, boilerplate? Then why must global state suffer?

3. Never used on the server side with Node.js even without immutability

Use this.$root instead of Vuex

Global state is in main.js

Use it in any component.

What can be improved here? Nothing.

Vuex is basically this:

Looks familiar? Vuex is a duplication. There are tons of boilerplate because we duplicate, and as Vuex has no v-model support, we have to duplicate even more.

What is actually Flux?

From https://redux.js.org, the advantages are:

1. Consistent behavior
2. Easy to test
3. Undo/redo
4. State persistence
5. Debuggable
a. When, where, why, and how your application’s state changed
b. Time-travel debugging
6. Works with any UI layer

All of the above is a result of storing data in global state. It is global state vs local state. You don’t need Flux for this. There is only one advantage — ultimate debugging. But why do we need debugging, logging for each a = b, a.push(b), etc? ALL SOFTWARE is written without this level of debugging — operation systems, databases, compilers, drivers, antiviruses, games, everything. Flux is a wrap with no purpose. That’s why they achieved ultimate access restriction, ultimate debugging and ultimate boilerplate. And they attributed to a wrap the advantages of keeping everything in global state and the advantages of normalization. Furthermore, keeping everything in global state has proved WRONG. There are no apps without local state. Why database normalization might not be needed in your app is explained later.

The origin of Flux

1. React released

2. Flux, Redux released

3. React Hooks released

Stop complicating, we just want this:

Flux, Redux were developed because using React alone exposes its poor support of immutability. Or setState() is at fault to be more precise. Vue doesn’t have this problem.

What is wrong with setState()?

1. The following code is incorrect because setState() can be batched or asynchronous

You must put all the code inside setState(). When developing a real component (not an example for the docs), this becomes a problem. Very often putting everything inside setState() makes the app work right, but it is just wrong from a programming standpoint.

2. Vue supports immutability for an object reference out of the box

Immutability for an object reference is not supported in React, Redux. That’s why they require you to normalize your state as a SQL database.

You must change this:

To this:

In fact, our state was already normalized. How many objects do we have in each variant? The same, 5: 1 chat, 2 participants, 2 messages. In JavaScript, both variants are normalized. But it is insufficient for React, it requires database normalization, so that you don’t have to change, for example, participant.name in two places when a user renames themselves. Database normalization might look perfect, but adds problems:

  1. It is an overkill for Vue, you don’t need a primary/foreign key relationship here. An object reference is already the result of findById().
  2. During development you don’t want to create a top-level array for every nested object and you are not 100% sure what nested objects should be organized so.
  3. How are changes detected? Instead of the object we pass the id of the object to a component. To detect changes, we must always findById() and then compare the previous with the current. It is definitely not a performance boost.

Note: immer, an immutability library, which is included in Redux Toolkit, supports immutability for an object reference, but no one cares.

The naming is misleading

“local” state has a flaw. Local state isn’t only local if it is passed to a child component. The right naming is as simple as:

  1. Parent component
  2. Child component
  3. The state of a component
  4. Global state is the state of the main component

Why do we need “single source of truth” and “local state”?

Conclusion

  1. Flux was developed to fix React’s problems. It failed.
  2. Flux spread from React to Vue because some people think it is a pattern. It is not a pattern. It is wrong in every way.
  3. React is being killed by its creators. Instead of fixing its problems, they continue to add more problems. The point is to make immutability invisible to a developer, but they move in the opposite direction. React Hooks is the latest and the final step in finishing React off.

A software engineer. Thanks to Vue, finally Client-side is as pleasant as Server-side

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store