|
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 the theoretical concept I read |
8 | 8 | // about (actions / actions creators, store, dispatcher, etc).
|
9 | 9 | // Only when I started using Redux did I realized 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
|
|
42 | 42 |
|
43 | 43 | // But before we start, let's speak a little bit about why flux exists and why we need it...
|
44 | 44 | // Let's pretend we're building a web application. What are all web applications made of?
|
45 |
| -// 1) templates / html = View |
46 |
| -// 2) data that will populate our views = Models |
| 45 | +// 1) Templates / html = View |
| 46 | +// 2) Data that will populate our views = Models |
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 | +// - Models look like stores |
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 | +// - Views look like React views (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're 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 |
63 |
| -// a dispatcher, then through our stores and finally all watchers of stores are notified. |
| 62 | +// actions directly modify Models or Views, flux ensures all actions go first through something called |
| 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 clearly 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 |
| -// 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 |
| 68 | +// 1) User clicks on button "A" |
| 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 |
| -// Finding the source of a bug in such an environment when something goes wrong can become quite a challenge |
74 |
| -// very quickly. This is because every View can watch every Model and every Model can watch other Models so |
| 73 | +// Finding the source of a bug in such an environment when something goes wrong can become quite challenging |
| 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: |
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 |
| 77 | +// Whereas when using flux and its unidirectional data flow, the example above could become: |
| 78 | +// 1) user clicks on button "A" |
| 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 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 |
84 |
| -// modified by an action and nothing else. And once all stores replied to an action, |
| 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 have replied to an action, |
85 | 85 | // views can finally update. So in the end, data always flow in one way:
|
86 | 86 | // action -> store -> view -> action -> store -> view -> action -> ...
|
87 | 87 |
|
|
0 commit comments