@chrisblom You can definitely do that, but the basic problem with that kind of architecture is that changing any of the leaf components often requires you to change props in all the intermediate components. You code ends up feeling really brittle and coupled, and it gets really annoying to change anything. If you want pure components (in the sense of being completely determined on their explicit inputs), a common pattern from the react world is to have a “container” component that is hooked up to the state atom (or a cursor into the atom) and which does any server-side communication or side-effect dispatches if you are using a framework. The container item then just renders a “presentation” component by passing in all the necessary inputs as props.
thanks for the long reply
ok, so if I understand correctly a single reactive top-level component that updates when the app state changes, and passes the current state to all subcomponents can work
but is annoying as when children need to modify properties of their parent, you need to muck around in the global state
the other extreme is to pass cursors around everywhere
and as a middleground between passing mutable state / immutable data everywhere, you can pass cursors to some components where it makes sense, and forward immutable data to the sub components
I like to keep state as local as possible and only move it globally when I have to thread it down more than one layer or thread a callback more than one layer. I do that just to keep the global state object smaller. Plenty of people put everything in the global state object though.
Whether you pass cursors or pass callbacks is a matter of taste in my opinion.