首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

使用 Redux 实现异步操作(1)

使用 Redux 实现异步操作(1)

图书搜索应用程序回顾使用图书搜索应用程序(如图 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— 因为该缩减程序实际上是一个缩减程序组合。
返回列表