viviier

Redux API使用教程

compose

它是一个没有依赖的纯函数

compose(f, g, h)(...arg) => f(g(h(...arg)))

使用实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function func1(num) {
console.log('func1' + num)
return num + 1
}
function func2(num) {
console.log('func2' + num)
return num + 2
}
function func3(num) {
console.log('func3' + num)
return num + 3
}
let re1 = func3(func2(func1(0)))
console.log('re1' + re1) // 0 1 3 6
// 隔壁二狗子说,要优雅
let re2 = Redux.compose(func3, func2, func1)(0)
console.log('re2' + re2) // 结果同上

createStore

创建store

使用实例:

1
2
3
4
5
6
7
8
const { createStore } = Redux
function reducer(state, action) {
// ...reducer处理过程
}
const store = createStore(reducer)
store.getState()

combineReducers

将多个reducer的状态合并

使用实例:

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
function reducer(state = {counter:0, todos: []}, action) {
switch(action.type) {
case 'ADD_TODO':
return {
...state,
todos: state.todos.push(action.type)
}
case 'INCREMENT':
return {
...state,
counter: state.counter+1
}
default:
return state
}
}
// 隔壁二狗子说,随着逻辑越来越多,代码也会变得臃肿,而我喜欢优雅
/*
* 目录结构如下
* reducers/
* |-- index.js
* |-- counterReducer.js
* |-- todosReducer.js
*/
import { combineReducers } from 'redux
import counterReducer from './counterReducer'
import todosReducer from './todosReducer'
const rootReducer = combineReducers({ // 合并后,就成了state.counter,state.todos
counter: counterReducer,
todos: todosReducer
})
/* reducers/counterReducer.js */
export default function counterReducer(counter = 0, action) {
switch(action.type) {
case 'INCREMENT':
return counter + 1
default:
return counter
}
}
/* reducers/todosReducer */
export default function todosReducer(todos = [], action) {
switch(action.type) {
case 'ADD_TODO':
return [
...todos,
action.payload
]
default:
return todos
}
}

bindActionCreators

dispatch(ActionCreator(xxx)) 自动dispatch

使用实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#btn').on('click', () => {
let content = $('#todoInput').val()
let action = addTodo(content) // 执行Action Creator 获取 action {type: 'xxx'}
store.dispatch(action) // 手动显示dispatch 一个 action
})
// 调用addTodo这个Action Createtor后得到一个action, 之后又要手动dispatch这个action,隔壁二狗子说,太麻烦
let actionCreators = Redux.bindActionCreators(
{addTodo: addTodo},
store.dispatch
)
$('#btn').on('click', () => {
let content = $('#todoInput').val()
actionCreators.addTodo(content) // 自动dispatch
})

applyMiddleware

中间件

applyMiddleware简明对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const stateMiddleware = ({getState}) => next => action {
console.log('state before dispatch', getState())
let returnValue = next(action)
console.log('state after dispatch', getState())
return returnValue
}
===>
function stateMiddleware(middlewareAPI) {
return function(dispatch) {
return function(action) {
console.log('state before dispatch', middlewareAPI.getState())
let returnValue = dispatch(action)
console.log('state after dispatch', middlewareAPI.getState())
return returnValue
}
}
}

使用实例:

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
function inc() {
return { type: 'INCREMENT'}
}
function dec() {
return { type: 'DECREMENT'}
}
function reducer(state, action) {
state = state || { counter: 0 }
switch(action.type) {
case 'INCREMENT':
return {counter: state.counter + 1}
case 'DECREMENT':
return {counter: state.counter - 1}
default:
return state
}
}
const printStateMiddleware = ({getState}) => next => action => {
console.log('dispatch 前', getState())
let returnValue = next(action)
console.log('dispatch 后', getState())
return returnValue
}
let store = Redux.createStore(
reducer,
Redux.applyMiddleware(printStateMiddleware)
)
store.dispatch(inc());
store.dispatch(inc());
store.dispatch(dec());

总结

Redux 有五个API,分别是:

  • createStore
  • combineReducers
  • applyMiddleware
  • bindActionCreators
  • compose

createStore 生成的 store 有四个API,分别是:

  • getState
  • dispatch
  • subscribe
  • replaceReducer
------本文结束感谢阅读------