Skip to content

Commit e923cc8

Browse files
author
Vlad Balin
committed
added explanation
1 parent c064a58 commit e923cc8

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

examples/flux-comparison/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,16 @@ But that's just type definitions. How do we actually work with these data? We ad
5151

5252
And that's it. All you have to do next, is to relax and enjoy pure unidirectional data flow.
5353

54+
Few words to explain how this code actually works. First, App's `state` is the model,
55+
and our models and collection can contain each other forming deeply nested structures. Second - they are able to detect deeply nested changes. Somewhat you could achieve with Object.observe, but better, because it works across the whole models ownership tree, and logic is
56+
smart enough to merge many change events into one in case of bulk changes.
57+
58+
So, whenever anything will be changed inside of products or cart, our `state` will notice it,
59+
and tell App component to update.
60+
61+
Because of that, and due to the fact that models and
62+
collections has they own behavior, it's safe and practical just to pass state elements down to the component tree as `props`. Therefore, `<Cart />` component will depend on just `Cart` collection, while `<Products />` component doesn't know anything about `<Cart />` and `Cart`. And that kind of isolation is exactly what we want, when our system is complex.
63+
5464
![](unidirectional-data-flow.jpg)
5565

5666
On a longer example, difference will become even bigger. Why? Because, we got quite [advanced facilities to

0 commit comments

Comments
 (0)