redux版本 3.7.2 (注: 分析的是redux,不是react-redux, 我这里是直接引入浏览器里,所以出现的 self.Redux,不要惊奇)
借用一张图,先了解下redux的几个概念
action: 一个操作的定义,大概是这个样子, 本身是一个对象
1
2
3
4
|
{
type:
'add'
,
todo
}
|
actionCreater: 一个函数,返回结果是一个action
1
2
3
4
5
6
|
function
add (todo) {
return
{
type:
'add'
,
todo
}
}
|
reducer: 真正更新数据操作的函数,大概是这么个样子
1
2
3
4
5
6
7
8
9
10
11
|
// reducer
let
todoReducer = function (state = todoList, action) {
switch
(action.type) {
case
'add'
:
return
[...state, action.todo]
case
'delete'
:
return
state.filter(todo => todo.id !== action.id)
default
:
return
state
}
}
|
store: 只有一个。把action,state,reducer连接起来的对象。有如下方法
- dispatch:触发一个action
- subscribe : 订阅store
- getState :获得当前的state
- replaceReducer :更换reducer
- observable :暂无研究(尴尬)
我们先来一个简单的示例,直接dispatch action模式。这里大家应该都懂,不然。。。。。。
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
|
/* 简单示例 */
let
{ createStore } = self.Redux
//默认state
let
todoList = []
// reducer
let
todoReducer = function (state = todoList, action) {
switch
(action.type) {
case
'add'
:
return
[...state, action.todo]
case
'delete'
:
return
state.filter(todo => todo.id !== action.id)
default
:
return
state
}
}
//创建store
let
store = createStore(todoReducer)
//订阅
function subscribe1Fn() {
console.log(store.getState())
}
let
sub = store.subscribe(subscribe1Fn)
store.dispatch({
type:
'add'
,
todo: {
id: 1,
content:
'学习redux'
}
})
store.dispatch({
type:
'add'
,
todo: {
id: 2,
content:
'吃饭睡觉'
}
})
store.dispatch({
type:
'delete'
,
id: 2
})
// 取消订阅
sub()
console.log(
'取消订阅后:'
)
store.dispatch({
type:
'add'
,
todo: {
id: 3,
content:
'打游戏'
}
})
|
输出如下:
createStore传入reducer生成store,store就可以订阅,和派发事件了,还是比较简单的。
- subscribe 是可以取消的,subscribe返回的是一个函数,执行该函数就会取消订阅。