I don't think it's true that everyone seems happy with this. In the past 10 years culture has shifted dramatically towards encapsulating and minimizing JS state (modules, moving away from imperative jQuery code and toward MVC, React) and, to your other point, moderately towards more strict CSS organizational techniques (OOCSS, SMACSS, BEM).
I agree that the culture by default was to program everything against a giant mutable state bucket and I'm not sure why that happened.
But the idea of React is to have central application-level global mutable state, instead of jQuery's lots of fragments of local state attached to DOM nodes ($(...).data) or kept in callback closures, CPS-style.
IMHO, article does not explain in what cases it can be better to have a global mutable state (i.e. containing mutation in Redux) instead of lots of local mutable state.
I think the single state object in React/Redux is more an implementation detail than anything. Using regular js variables would allow free mutation for everyone at any place, so a new "variable system" must be created by encapsulating all state in an object.
You cannot avoid keeping state and mutating it, the point is to do so in a predictable and controlled way. It is not that relevant whether you refer to `state.value` or just `value` as long as you're able to keep track of all your mutation sources easily. Having a global object is just a way of conveniently do that in javascript.
I agree that the culture by default was to program everything against a giant mutable state bucket and I'm not sure why that happened.