forked from react-guide/redux-tutorial-cn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
02_about-state-and-meet-redux.js
52 lines (37 loc) · 2.33 KB
/
02_about-state-and-meet-redux.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 章节 2 - about-state-and-meet-redux.js
// 在实际应用中,我们不仅需要 action 告诉我们发生了什么,还要告诉我们需要随之更新数据。
// 这就让我们的应用变的棘手:
// 如何在应用程序的整个生命周期内维持所有数据?
// 如何修改这些数据?
// 如何把数据变更传播到整个应用程序?
// 于是 Redux 登场。
// Redux (https://github.com/rackt/redux) 是一个“可预测化状态的 JavaScript 容器”。
// 我们先回顾上述提出的问题并用 Redux 的词汇表给出以下解答(部分词汇也来源于 Flux):
// 如何在应用程序的整个生命周期内维持所有数据?
// 以你想要的方式维持这些数据,例如 JavaScript 对象、数组、不可变数据,等等。
// 我们把应用程序的数据称为状态。这是有道理的,因为我们所说的数据会随着时间的推移发生变化,这其实就是应用的状态。
// 但是我们把这些状态信息转交给了 Redux(还记得么?Redux 就是一个“容纳状态的容器”)。
// 如何修改这些数据?
// 我们使用 reducer 函数修改数据(在传统的 Flux 中我们称之为 store)。
// Reducer 函数是 action 的订阅者。
// Reducer 函数只是一个纯函数,它接收应用程序的当前状态以及发生的 action,然后返回修改后的新状态(或者有人称之为归并后的状态)。
// 如何把数据变更传播到整个应用程序?
// 使用订阅者来监听状态的变更情况。
// Redux 帮你把这些连接起来。
// 总之 Redux 提供了:
// 1)存放应用程序状态的容器
// 2)一种把 action 分发到状态修改器的机制,也就是 reducer 函数
// 3)监听状态变化的机制
// 我们把 Redux 实例称为 store 并用以下方式创建:
/*
import { createStore } from 'redux'
var store = createStore()
*/
// 但是当你运行上述代码,你会发现以下异常消息:
// Error: Invariant Violation: Expected the reducer to be a function.
// 这是因为 createStore 函数必须接收一个能够修改应用状态的函数。
// 我们再试一下
import { createStore } from 'redux'
var store = createStore(() => {})
// 看上去没有问题了...
// 继续下一个教程:03_simple-reducer.js