rum 2018-01-24 | Slack Archive

justinlee04:01:04

@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.

chrisblom09:01:47

thanks for the long reply

chrisblom09:01:14

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

chrisblom09:01:02

but is annoying as when children need to modify properties of their parent, you need to muck around in the global state

chrisblom09:01:43

the other extreme is to pass cursors around everywhere

chrisblom09:01:58

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

justinlee14:01:40

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.

justinlee14:01:54

Whether you pass cursors or pass callbacks is a matter of taste in my opinion.

2018-01-24

Channels