Board logo

标题: 结合使用 Redux 和 React（2） [打印本页]
作者: look_w    时间: 2018-11-18 19:40     标题: 结合使用 Redux 和 React（2）

图书搜索应用程序您已深入掌握 Redux，但仍有许多基础知识需要介绍，其中包括：
我将使用图 1 中所示的应用程序来演示前面提到的这些主题，本期文章将介绍第一个主题，剩余主题以后再介绍。图书搜索应用程序使用 Google Books REST API        异步搜索图书。用户在文本字段中输入一个主题并按 Enter 键后，应用程序抓取前 10 部与该主题匹配的图书的信息，显示每部图书的封面缩略图。
图 1. 图书搜索应用程序图书缩略图是链接。单击缩略图，就会在 books.google.com 上看到该图书的更多信息，如图 2 所示。
图 2. 单击一个图书缩略图的结果该应用程序提供了一种替代性的列表视图，如图 3 所示。可单击 List 单选按钮来激活列表视图。
图 3. 列表视图最后，该应用程序支持撤销（通过单击向左箭头）和重做（通过单击向右箭头），以及一个可在应用程序的以前状态中前后移动的历史滑块。
以上是图书搜索应用程序的概述。接下来，我将介绍如何使用 React 和 Redux 实现该应用程序。
组件首先，我将创建该应用程序的一个原型，如图 4 所示。
图 4. 原型接下来，我将设计一种组件分层结构，如图 5 所示。
图 5. 图书搜索应用程序的组件 组件分层结构类似于：
这是该应用程序的目录结构和关联的文件：
actions.js
  components
    book.css
    book.js
    books.js
    controls.js
    displayModeOptions.js
    history.js
    stateviewer.js
    topicselector.js
  containers
    app.js
    books.js
    controls.js
    history.js
    stateviewr.js
    topicselector.js
images
  app.js
index.html
index.js
middleware.js
node_modules
package.json
reducers.js
statehistory.js
store.js
webpack.config.js




该应用程序的 8 个组件中的 7 个的具有相应的 Redux 容器组件，总共有 15 个组件。容器组件位于容器目录中，表示组件位于组件目录中。
应用程序入口点图 6 显示了图书搜索应用程序的起点，其中包含具有主题选择器和显示选项的控件组件。
图 6. 图书搜索应用程序的起点 清单 7 给出了入口点的代码，该代码呈现 App 组件。该组件包装在一个 Redux Provider        组件内。回想一下，提供程序使 Redux 存储可用于该应用程序。
清单 7. 入口点 (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
24
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();
  debugger
}

store.subscribe(showState);




该应用程序的入口点也订阅了 Redux 存储；当存储中的状态发生更改时，Redux 调用        showState()，后者获取应用程序的状态并调用调试程序。
在呈现应用程序并订阅 Redux 存储之前，入口点分派了两个操作，一个用于设置图书主题，另一个用于设置显示模式。
不同于   中的 stoplight 示例中对 store.dispatch() 的调用，清单 7          中的两次分派调用使用函数（setTopic() 和          setDisplayMode()）来创建操作对象。这些函数称为操作创建器。



欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0