React - Redux 学习之Redux-thunk & applyMiddleware

发表于 | 分类于 | 评论数： | 阅读次数：

在之前的练习中,我们一直在使用同步的方式进行状态管理, 那么在Redux中,我么如何使用异步的方式进行状态更新呢?
这里需要用到Redux的中间件applyMiddelware 和 redux-thunk:

首先,我们应该在创建Store的时候注入中间件

1
2
3
4
5
6
7
8
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(
    reducers,
    // 注入中间件
    applyMiddleware(thunk)
)

这里根据文档,我们知道thunk 这个东西可以将我们的Action Object 转为 function

例如:

1
2
3
const foo = 1 + 2
// 转换为, 这时的foo就被称作一个thunk
const foo = () => 1 + 2

以下是React的例子:

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
// 原有的Action
const increament = (id) => ({
	type: 'INCREAMENT',
	counter: counter++
	id
})

//////////////////////////////////////////
// 当我们请求之前可以先执行该Action, 比如可以触发Loading的操作
const requestAction = () => ({
	type: 'REQUEST_ACTION'
})

// 结束后我们触发一个Action 来重置操作,获取数据等
const receiveAction = (data) => ({
	type: 'RECEIVE_ACTION',
	data
})
// 可以进行异步操作了
const increament = () => (dispatch, getState) => {
	dispatch(requestAction())
	return fetch('.someUrl').then(
		res => dispatch(receiveAction(res))
	)
}

如上的第一段代码,是我们原有的Action,在通过中间件的处理后,我们的Action可以写成一个Function了,我们即可以配合类似Axios等来做一些异步的数据处理了.

当然,这只是最简单的例子, 我们可以以后再学习一些复杂的实战应用.

目前我们只是使用中间件模拟获取了远程的TodoList数据罢了~~ :P