reactjs - React components with shared state that are far away -

i new react please excuse me if noob question not find answer in docs or elsewhere.

let's have 2 buttons counter share state far away each other in terms of placement in ui.

the documentation says common owner component both buttons should own state. makes sense if components next each other in example if buttons each part of different ui group , far away in terms of nesting? state holder root of document , have pass handler function down through many layers. , if need add new component somewhere else needs know state? have modify parent components in way pass state down? tremendously impractical.

without react have global subscribe/publish pattern jquery observer , ui elements subscribe/publish regardless of nesting position.

how react solve this?

---

related question: if need load/save state db, how pass reference of controller (or whatever) each react component stores state?

1 global state may use redux

redux predictable state container javascript apps

for connect/subscribe component state ,you should use react-redux

if components far away in terms of nesting, may connect/subscribe them redux store, , take neccessary part of state. update if neccessary part changed.

article explains how can case

to learn how use redux can watch videos creator of redux (dan abramov)

1.getting-started-with-redux

2.building-react-applications-with-idiomatic-redux

3.i recommend discordapp rectiflux channel. because allways can ask question online.(there can find contributors of tools)

---

2 alternative way less verbose redux is mobx

mobx battle tested library makes state management simple , scalable transparently applying functional reactive programming (tfrp). philosophy behind mobx simple:

anything can derived application state, should derived. automatically.