[Python] How to make a reusable component do an implicit, reactive, global state update?

In reflex, I am trying to figure out how to conduct a reactive, implicit "global state update" from within my reusable component.

Imagine a reusable component with component state like "Buy an item X", so you can have components like "Buy a house" or "Buy a car". I have many such components in my app. When I click "buy" in any of them, I want for the global state of "money available" to be updated, and as such, reactively update & disable all "Buy" buttons across all reusable components where the user no longer has enough money to buy given item. There may be also other components requiring update based on the changed amount of available money.

I would like to understand how to solve this problem in two cases:

A) The global "money available" state is a frontend variable.
B) The global "money available" state is a backend-only variable, so it doesn't synchronize automatically.

I was experimenting with computed vars, multiple states, state inheritance, accessing any state but I didn't figure out the solution yet.

The computed vars doc says "A computed var is recomputed every time an event is processed in your app." but I am not sure how to leverage this for the scenario I described. And backend-only variables unfortunately are not synchronized with frontend, but my "money available" variable is a backend-only variable.

Continue reading...