-
Notifications
You must be signed in to change notification settings - Fork 298
/
10_state-subscriber.js
104 lines (77 loc) · 4.06 KB
/
10_state-subscriber.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// 章节 10 - state-subscriber.js
// 我们接近完成一个完整的 Flux 闭环了,现在只差一个至关重要的环节:
// _________ _________ ___________
// | | | Change | | React |
// | Store |----▶ events |-----▶ Views |
// |_________| |_________| |___________|
// 没有它,在 store 改变时我们就不能更新我们的视图。
// 幸运的是,监视 Redux store 更新有一个很简单的办法:
/*
store.subscribe(function() {
// retrieve latest store state here
// Ex:
console.log(store.getState());
})
*/
// 是的,简单到我们都开始重新相信圣诞老人了(译者注:2333,对不起这个比喻太幽默了)
// 试一下这段代码:
import { createStore, combineReducers } from 'redux'
var itemsReducer = function (state = [], action) {
console.log('itemsReducer was called with state', state, 'and action', action)
switch (action.type) {
case 'ADD_ITEM':
return [
...state,
action.item
]
default:
return state;
}
}
var reducer = combineReducers({ items: itemsReducer })
var store_0 = createStore(reducer)
store_0.subscribe(function() {
console.log('store_0 has been updated. Latest store state:', store_0.getState());
// 在这里更新你的视图
})
var addItemActionCreator = function (item) {
return {
type: 'ADD_ITEM',
item: item
}
}
store_0.dispatch(addItemActionCreator({ id: 1234, description: 'anything' }))
// 输出:
// ...
// store_0 has been updated. Latest store state: { items: [ { id: 1234, description: 'anything' } ] }
// 我们的订阅回调成功的调用了,同时 store 现在包含了我们新增的条目。
// 理论上,到这就可以停止了。我们的 Flux loop 已经闭合,我们理解了构造 Flux 的全部概念,
// 实际上它也没那么神秘。但是老实说,还有很多要讲的,
// 为了让最后一个概念保持简单,
// 我们有意的在例子中去掉了一些东西:
// - 我们的订阅回调没有把 state 作为参数,为什么?
// - 既然我们没有接受新的 state, 我们就被限定到了只能开发这个已经完成的 store (store_0) 所以这个办法在
// 含有多个模块的应用下不可行。
// - 我们究竟是怎么更新视图的?
// - 怎么取消订阅?
// - 更通俗的讲,我们怎么把 Redux 和 React 结合到一起?
// 我们现在进入了一个“将 Redux 加入到 React” 的领域。
// 理解 Redux 可以无条件绑定到 React 上是很重要的。
// Redux 是一个“为 Javascript 应用而生的可预测的状态容器”,
// 你有很多方式去使用它,而 React 应用只不过是其中一个。
// 从这个角度看,如果没有 react-redux (https://github.com/reactjs/react-redux),我们将失去很多。
// 在 Redux 1.0.0 之前它是包含在 Redux 中的,这个库节省了我们很多时间,
// 它包含了在 React 中使用 Redux 时所有的绑定。
// 回到订阅这件事,为什么我们这个订阅函数看上去非常简单
// 而且没有提供很多特性?
// 这就是 Redux 精彩之处了! 它所有 API 都很抽象(包括订阅),
// 支持高度扩展,允许开发者造出一些疯狂的轮子
// 比如 Redux DevTools (https://github.com/gaearon/redux-devtools).
// 但是最后我们还是需要一个更好的接口订阅我们的 store 变化。这也就是 react-redux 给带给我们的:
// 一个完美填补原生 Redux 订阅机制和开发者的期待之间的空缺的 API ,
// 这样我们不再需要直接使用订阅。而只是
// 使用 “provide” 和 “connect” 绑定,不必再关心隐含在内的订阅方法。
// 所以,订阅方法依然会被我们使用,
// 只不过它通过高度整合的接口替我们处理 redux state 的连接。
// 现在我们隐藏了那些绑定,并且展示了连接你的组件和 Redux 的 state 是很轻松的一件事。
// 继续下一个教程: 11_Provider-and-connect.js