|
6 | 6 | // but I just didn't grasp concepts correctly. In the end, I was just applying documentation of different
|
7 | 7 | // flux frameworks (Reflux, Flummox, FB Flux) and trying to make them match with the theoretical concept I read
|
8 | 8 | // about (actions / actions creators, store, dispatcher, etc).
|
9 |
| -// Only when I started using Redux did I realized that flux is more simple than I thought. This is all |
| 9 | +// Only when I started using Redux did I realize that flux is more simple than I thought. This is all |
10 | 10 | // thanks to Redux being very well designed and having removed a lot of "anti-boilerplate features" introduced
|
11 | 11 | // by other framework I tried before. I feel today that Redux is a much better way to learn about flux
|
12 |
| -// than many other framework. That's why I want now to share with everyone, and using my own words, |
| 12 | +// than many other framework. That's why I want now to share with everyone, using my own words, |
13 | 13 | // flux concepts that I am starting to grasp, focusing on the use of Redux.
|
14 | 14 |
|
15 | 15 | // You may have seen this diagram representing the famous unidirectional data flow of a flux application:
|
|
62 | 62 | // actions directly modify Models or Views, flux ensures all actions go first through something called
|
63 | 63 | // a dispatcher, then through our stores, and finally all watchers of stores are notified.
|
64 | 64 |
|
65 |
| -// To get more clearly how MVC and flux differs, we'll |
| 65 | +// To get more clarity how MVC and flux differs, we'll |
66 | 66 | // take a classic use-case in an MVC application:
|
67 | 67 | // In a classic MVC application you could easily end up with:
|
68 | 68 | // 1) User clicks on button "A"
|
69 | 69 | // 2) A click handler on button "A" triggers a change on Model "A"
|
70 | 70 | // 3) A change handler on Model "A" triggers a change on Model "B"
|
71 |
| -// 4) A change handler on Model "B" triggers a change on View "B" that re-renders itself |
| 71 | +// 4) A change handler on Model "B" triggers a change on View "B" that re-renders itself |
72 | 72 |
|
73 | 73 | // Finding the source of a bug in such an environment when something goes wrong can become quite challenging
|
74 | 74 | // very quickly. This is because every View can watch every Model, and every Model can watch other Models, so
|
|
80 | 80 | // 3) since all other stores are also notified about the action, Store B can react to the same action too
|
81 | 81 | // 4) View "B" gets notified by the change in Stores A and B, and re-renders
|
82 | 82 |
|
83 |
| -// See how we avoid to have Store A being directly linked to Store B? Each store can only be |
| 83 | +// See how we avoid directly linking Store A to Store B? Each store can only be |
84 | 84 | // modified by an action and nothing else. And once all stores have replied to an action,
|
85 |
| -// views can finally update. So in the end, data always flow in one way: |
| 85 | +// views can finally update. So in the end, data always flows in one way: |
86 | 86 | // action -> store -> view -> action -> store -> view -> action -> ...
|
87 | 87 |
|
88 | 88 | // Just as we started our use case above from an action, let's start our tutorial with
|
|
0 commit comments