使用 Redux 实现异步操作（1）

look_w

图书搜索应用程序回顾使用图书搜索应用程序（如图 1 所示），您可以通过 Google Books search API 按主题来搜索图书。每次搜索得到与当前主题相关的 10        部或更少的图书，并显示每部图书的封面。封面缩略图是跳转到图书细节的链接。
图 1. 图书搜索应用程序有趣之处并不在于搜索结果，而是应用程序如何维护状态。或许更有趣的是应用程序的历史组件，用户可通过该组件在应用程序的状态中前后移动。在整个过程中，应用程序始终会在页面底部显示当前状态。
回想一下，在   中，应用程序的起点类似于图 2。
图 2. 图书搜索应用程序的起点清单 1（等同于第 2 部分中的清单 7，这里再次给出是为了便于参考）显示了应用程序的入口点代码。
清单 1. 入口点          (index.js)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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 } from './actions'; store.dispatch(setTopic('javascript')); store.dispatch(setDisplayMode('THUMBNAIL')); ReactDOM.render(   <Provider store={store}>     <App />   </Provider>,   document.getElementById('example') ) function showState() {   const state = store.getState(); } store.subscribe(showState);

应用程序分派两个操作（由 setTopic() 和 setDisplayMode() 操作创建器函数创建）来将主题的初始状态设置为          javascript，将显示模式的初始状态设置为 THUMBNAIL。（要复习一下          setTopic() 和 setDisplayMode() 操作创建器，请参阅 “ 。”）
Provider 组件 — 包含在 react-redux 绑定中（将它的所有属性向 Provider        标签主体中的所有组件公开），在本例中为一个属性：Redux 存储。
在   中可以看到，应用程序的入口点导入该存储，将它指定为 Provider 组件的属性。Redux        存储创建并导出到 store.js 中，其中仅包含：

1 2 3 4

import { createStore } from 'redux'; import reducers from './reducers'; export const store = createStore(reducers);

store.js 代码调用 Redux.createStore() 来创建 Redux 存储。应用程序将所需的缩减程序传递给          createStore()。
请注意，从 reducers.js 导出的缩减程序名为 reducers，其中包含一个 s，而不是          reducer— 因为该缩减程序实际上是一个缩减程序组合。