结合使用 Redux 和 React（2）

look_w

图书搜索应用程序您已深入掌握 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()）来创建操作对象。这些函数称为操作创建器。