异步操作图 4 显示了图书搜索应用程序的下一个版本。
图 4. 异步搜索图书 您已从 中知道，图 4 中所示的图书缩略图来自 Google Books API。通过直接在浏览器中查询 URL googleapis.com（比如键入 http://www.googleapis.com/v11/volumes/?q=javascript 作为网址），您可以获得 JSON 格式的查询结果，如图 5 所示。
图 5. 使用 Google Books REST API 搜索图书  应用程序的所有操作目前都是简单的对象。对于异步操作，我不想要对象，而是想要一个在异步请求处理过程中分派操作的函数。
清单 10 显示了图书搜索应用程序的更新后的入口点。
清单 10. 在入口点抓取图书信息 (index.js)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './containers/app';
import store from './store';
import { setTopic, setDisplayMode, fetchBooks } from './actions';
store.dispatch(setTopic('javascript'));
store.dispatch(setDisplayMode('THUMBNAIL'));
store.dispatch(fetchBooks());
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('example')
)
|
清单 10 与该应用程序的入口点的之前版本的唯一区别在于抓取图书操作的分派。该操作的创建者是 fetchBooks() 函数，如清单 11 所示。
清单 11. 异步操作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
| /**
* The fetchBooks action creator returns a function instead of an object.
* Custom middleware is necessary for that to work.
*/
const fetchBooks = () => {
return fetchCurrentTopic;
}
const fetchStart = () => {
return {
type: 'FETCH_STARTED'
}
}
const fetchComplete = json => {
return {
type: 'FETCH_COMPLETE',
json
}
}
const fetchFailed = error => {
return {
type: 'FETCH_FAILED',
error
}
}
const setTopic = topic => {
return {
type: 'SET_TOPIC',
topic
}
}
const setDisplayMode = displayMode => {
return {
type: 'SET_DISPLAY_MODE',
displayMode
}
}
|
清单 11 实现了 6 个操作创建器。回想一下 ，操作创建器是返回操作的函数。
setTopic() 和 setDisplayMode() 操作创建器与之前的实现相同。除了 setTopic() 和 setDisplayMode() 之外，清单 11 中实现的 6 个操作创建器中的另外 3 个也将返回操作对象。这些操作创建器返回的操作会在发生异步抓取时指定状态：
- fetchStart()
- fetchComplete()
- fetchFailed()
第 6 个抓取操作创建器 (fetchBooks()) 返回一个函数而不是对象。该函数（如清单 12 所示）使用 JavaScript fetch API 来抓取图书，但（更重要的是）请注意，它会在合适的时间点分派其他抓取操作。
清单 12. 抓取当前主题1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| const URL = 'https://www.googleapis.com/books/v1/volumes?q=';
const fetchCurrentTopic = (dispatch, state) => {
dispatch(fetchStart())
fetch(URL + state.topic)
.then(res => {
return res.json()
})
.then(json => {
if(json.error) {
dispatch(fetchFailed(json.error))
}
else {
dispatch(fetchComplete(json))
}
})
.catch(error => {
dispatch(fetchFailed(json.error))
})
}
|
像所有 Redux 操作一样，抓取操作由缩减程序处理（缩减）。该应用程序将该缩减程序与显示模式和主题缩减程序组合在一起。
清单 13 显示了 reducers.js 的部分代码，展示了抓取缩减程序如何处理抓取操作。
清单 13. 抓取缩减程序（reducers.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
| import { combineReducers } from 'redux';
const defaults = {
TOPIC: 'javascript',
DISPLAY_MODE: 'THUMBNAIL',
BOOKS: []
}
...
const fetchReducer = (state = defaults.BOOKS, action) => {
switch(action.type) {
case 'FETCH_STARTED':
case 'FETCH_FAILED':
return [];
case 'FETCH_COMPLETE':
return action.json.items
default:
return state;
}
}
// Combine reducers
export default combineReducers({
topic: topicReducer,
displayMode: displayModeReducer,
books: fetchReducer
});
|
当抓取开始或失败时，抓取缩减程序会返回一个空数组。当抓取完成时，抓取缩减程序返回从 REST 调用返回的项。 |
