Redux Motivation: mutation and asynchronicity with example

Question

To understand Redux motivation, I read the offical link https://redux.js.org/introduction/motivation and this stackoverflow question Explain Redux : mutation and asynchronicity but I am not able to get it as example is missing on both the links. Googling also not presented any page with example of combination of mutation and asynchronicity.

What I want is the real life web application example where combination of mutation and asynchronicity is mess. Every page/blog just starts with manage state easily but they are missing real web app example of mutation and asynchronicity combination explanation(motivation). Can anyone help me by giving good example.

Motivation is saying: we're mixing two concepts that are very hard for the human mind to reason about: mutation and asynchronicity. I call them Mentos and Coke. Both can be great in separation, but together they create a mess.. Can anyone give real example on this?

Answer 1

With both async and mutation, you lose your "single source of truth" for managing your state.

Let's say you have a global counter initialized to 0. You also have 2 Button components with async handlers, inc and dec that affect the global counter.

If I click inc, inc, dec; What is the value of counter at any point?

We have no way to know which event(s) already fired b/c they are not guaranteed to come in order. So if I'm looking at the counter value 1, is it b/c of:

resolved: inc

pending: inc, dec

or

resolved: inc, inc, dec

With async functions and mutatable state, you never really know what your state is unless nothing is happening.