Global sources & sinks

How do you pass sinks back up a nested tree without piping it through each branch?

eg: 3 pages, on one of the pages there is intent to +1 / -1 to a number. I want all other pages to be able to listen to that change and update their own number. if I start with 0 click + 1 and move around the app all pages have a number 1.

correct me if I’m wrong but it feels like that sort of state is only kept within each component? so your sources at the Cycle.run level don’t have a clue about whats going on elsewhere unless you passed it along each level until it reaches the top. Not so bad one level deep but what about 3-4 levels deep!

redux is a little noisy but it is passing everything back to the top level and feeding it down when a change happens, then the whole tree has the ability to listen to that change (in React via it’s props)

Here is a link get a visual representation of what I’m trying to achieve.

[staltz]

Bottom-up approach simply means you have built the child component first, and it manages its own state because you build it as if it would be the entire application. And only after that have you decided to compose it in the context of a parent. So Bottom-up doesn’t mean that you can’t compose children components. If the parent needs to maintain some common state for all its children, it’s still a Bottom-up approach as long as you didn’t start building the parent. If the children cannot live (be reused) in other applications, then it’s not bottom-up.

[staltz]

@Cmdv this is just the difference between top-down approach and bottom-up approach.

If you want global shared state like in Flux and Redux, then you really actually just want one dataflow component, because the Cycle.js equivalent of props-only View in Flux is just functions view : state -> vtree.

Single global state object is the top-down approach where you start with the assumption that all state is in that global object, and all the views are just derivations of that.

Stateful components is the bottom-up approach where you start with existing components and you put them together by composing their behaviors. In this approach, manual “piping” as you call is unavoidable. To some extent in my opinion, I like manual piping because I don’t believe it is as tedious as you describe, but it does give you an explicit picture of what happens, without magic underneath.

That said, there are tradeoffs. Neither top-down nor bottom-up is a clear winner and it’s not fair to try naming a winner.

	Top-down	Bottom-up
Single source of truth	Yes	No
Explicit piping	No	Yes
Easy reusability of components	No	Yes

So, yes, with Nested Dataflow Components you need to manually pass sources and sinks from parent to child and vice-versa. But its a cost we pay in order to get better reusability and explicit contracts on the component boundaries.

If you really really want Redux or a single state atom approach, go ahead for it, but I don’t think we can do a compromise between Nested Dataflow Components and single state atom because the two are opposed architectures.