|
1 | 1 | // 章节 0 - introduction.js |
2 | 2 |
|
3 | | -// 为什么要有这个教程呢? |
4 | | -// 在我尝试学习 Redux 的时候,我发现之前的阅读过的一些文章加上个人的经验, |
5 | | -// 让我对 flux 产生了一些错误的认知。 |
| 3 | +// 首先,为什么会有这个教程呢? |
| 4 | +// 在我尝试学习 Redux 的时候,我发现之前阅读过的一些文章加上个人的经验, |
| 5 | +// 让我对 flux 产生了一些误解。 |
6 | 6 | // 当然,我不是说那些关于 flux 的文章写得不好,只是我没能正确地领会其中的概念。 |
7 | 7 | // 到头来,我只是对着各种 flux 框架(Reflux、Flummox、FB Flux)的文档照猫画虎, |
8 | | -// 并试着把它们和之前了解到的理论概念联系起来。 |
9 | | -// 等我用了 Redux 之后,我才发现原来flux比我想象的要简单很多。 |
10 | | -// 这些都归功于 Redux 通过优良的设计来减少样板文件,而其它框架则是为了减少样板文件却又引入了很多新的代码。 |
| 8 | +// 并试着把它们和之前了解到的理论概念联系起来 (actions / actions creators、 store、 dispatcher)。 |
| 9 | +// 等我用了 Redux 之后,我才发现原来 flux 比我想象的要简单很多。 |
| 10 | +// 这些都归功于 Redux 通过优良的设计减少了样板代码,而其它框架则是为了减少样板代码却又引入了很多新的代码。 |
11 | 11 | // 我现在觉得用通过 Redux 来学习 flux 比通过其他框架高效得多。 |
12 | | -// 这就是为什么我想分享给大家,用我自己的话来说, |
| 12 | +// 这就是为什么我想分享给大家这个教程, |
13 | 13 | // 通过关注 Redux 的用法来理解 flux 的概念。 |
14 | 14 |
|
15 | | -// 你一定已经看过这张著名的 flux 的单向数据流图了。 |
| 15 | +// 你可能已经看过这张著名的 flux 的单向数据流图了。 |
16 | 16 |
|
17 | 17 | /* |
18 | 18 | _________ ____________ ___________ |
|
36 | 36 | */ |
37 | 37 |
|
38 | 38 | // 在这个教程里,我们会一步步地向你介绍上图里的各个概念。 |
39 | | -// 我们会把这些概念分成单独的章节来介绍它们存在的意义和作用, |
40 | | -// 而不会笼统地介绍整张数据流图。 |
| 39 | +// 我们会把这些概念分成单独的章节来介绍它们存在的意义和作用。 |
41 | 40 | // 在最后,当我们理解了每一个概念后,我们会发现这张图真是意义深远啊! |
42 | 41 |
|
43 | 42 | // 在我们开始之前,我们先聊下一 flux 存在的意义以及我们为什么需要它。 |
|
52 | 51 | // - Model 看起来像 Store |
53 | 52 | // - 用户事件、数据操作以及它们的处理程序看起来像 |
54 | 53 | // "action creators" -> action -> dispatcher -> callback |
55 | | -// - View 看起来像 React view (或者其他什么的) |
| 54 | +// - View 看起来像 React view (或者其它类似的概念) |
56 | 55 |
|
57 | 56 | // 所以,flux 就只是一个新名词么?不全是,但是新名词是很重要的, |
58 | 57 | // 因为通过引入这些新术语我们可以更准确地表述各种专业术语。 |
|
82 | 81 |
|
83 | 82 | // 来看一下我们是如何避免 Store A 和 Store B 直接相关联的。 |
84 | 83 | // Store 只能被 action 修改,别无他选。 |
85 | | -// 并且当所有 Store 响应了 action 后,最终所有 View 都会更新。由此可见,数据总是沿一个方向进行流动: |
| 84 | +// 并且当所有 Store 响应了 action 后,View 才会最终更新。由此可见,数据总是沿着一个方向进行流动: |
86 | 85 | // action -> store -> view -> action -> store -> view -> action -> ... |
87 | 86 |
|
88 | 87 | // 上面我们首先从 action 开始我们的用例, |
|
0 commit comments