|
4 | 4 | // When trying to learn Redux, I realized that I had accumulated in the past incorrect knowledge about flux through
|
5 | 5 | // articles I read and personal experience. I don't mean that articles about flux are not well written
|
6 | 6 | // but I just didn't grasp concepts correctly. In the end, I was just applying documentation of different
|
7 |
| -// flux framework (reflux, flummox, FB Flux) and trying to make them match with theoretical concept I read |
| 7 | +// flux frameworks (reflux, flummox, FB Flux) and trying to make them match with 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:
|
|
47 | 47 | // 3) Logic to retrieve data, glue all views together and to react accordingly to user events,
|
48 | 48 | // data modifications, etc. = Controller
|
49 | 49 |
|
50 |
| -// This is the very classic MVC that we all know about. But it actually look like concepts of flux, |
| 50 | +// This is the very classic MVC that we all know about. But it actually looks like concepts of flux, |
51 | 51 | // just expressed in a slightly different way:
|
52 |
| -// - Model look like store |
| 52 | +// - Model looks like store |
53 | 53 | // - user events, data modifications and their handlers look like
|
54 | 54 | // "action creators" -> action -> dispatcher -> callback
|
55 |
| -// - View look like React view (or anything else as far as Flux is concerned) |
| 55 | +// - View looks like React view (or anything else as far as Flux is concerned) |
56 | 56 |
|
57 | 57 | // So is flux just a matter of new vocabulary? Not exactly. But vocabulary DOES matter, because by introducing
|
58 | 58 | // these new terms we are now able to express more precisely things that were regrouped under
|
59 | 59 | // various terminologies... For example, isn't a data fetch an action? just as a click is also an action?
|
60 |
| -// and a change in an input is an action too... Then we are all already used to issue action from our |
| 60 | +// and a change in an input is an action too... Then we are all already used to issuing actions from our |
61 | 61 | // applications, we were just calling them differently. And instead of having handlers for those
|
62 |
| -// actions modifying directly Models or Views, flux ensure all actions go first through something called |
| 62 | +// actions modifying directly 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 |
66 |
| -// take a classic use-case in an MVC application: |
| 65 | +// To get more clearity on how MVC and Flux differs, we'll |
| 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 click on button "A"
|
69 |
| -// 2) a click handler on button "A" trigger a change on Model "A" |
70 |
| -// 3) a change handler on Model "A" trigger a change on Model "B" |
71 |
| -// 4) a change handler on Model "B" trigger a change on view "B" that re-render itself |
| 69 | +// 2) a click handler on button "A" triggers a change on Model "A" |
| 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 |
72 | 72 |
|
73 | 73 | // Finding the source of a bug in such an environment when something goes wrong can become quite a challenge
|
74 | 74 | // very quickly. This is because every View can watch every Model and every Model can watch other Models so
|
75 | 75 | // basically data can arrive from a lot of places and be changed by a lot of sources (any views or any models).
|
76 | 76 |
|
77 |
| -// Whereas when using Flux and its unidirectional data flow the example above could become: |
| 77 | +// Whereas when using Flux and its unidirectional data flow. The example above could become: |
78 | 78 | // 1) user click on button "A"
|
79 |
| -// 2) a handler on button "A" trigger an action that is dispatched and produce a change on store "A" |
80 |
| -// 3) since all others stores are also notified about the action, Store B can react to the same action too |
81 |
| -// 4) View "B" get notified by change in store A and B and re-render |
| 79 | +// 2) a handler on button "A" triggers an action that is dispatched and produces a change on store "A" |
| 80 | +// 3) since all other stores are also notified about the action, Store B can react to the same action too |
| 81 | +// 4) View "B" gets notified by change in store 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 |
84 |
| -// modified by an action and nothing else. And once all stores replied to an action, |
85 |
| -// views can finally update. So in the end, data always flow in one way: |
| 83 | +// See how we avoid directly linking store A to store B? Each store can only be |
| 84 | +// modified by an action and nothing else. And once all stores reply to an action, |
| 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