使用 Redux 实现异步操作-2

look_w

组合缩减程序最终，完成的图书搜索应用程序的状态将包含以下信息：

• 一个主题
• 一个图书列表
• 当前抓取状态（开始、完成或失败）
• 显示模式（缩略图或列表）

该应用程序显示了针对某个特定主题的图书列表。因为该应用程序异步抓取图书，所以该应用程序会跟踪当前抓取的状态。该应用程序可将图书显示为其封面的缩略图，如 图 1 所示，或者显示为文本列表，所以该应用程序也会跟踪显示模式：列表 或缩略图。
回想一下，Redux 应用程序中的状态存储在单个 JavaScript 对象中。最终的图书搜索应用程序的状态将拥有 4 个属性，对应于前面的列表中的 4 部分信息：

• topic
• books
• currentStatus
• displayMode

另外回想一下，除了仅有一个存储状态的对象，Redux        应用程序也仅有一个针对该状态的缩减程序。但是，对于非平凡的应用程序，维护单个创建应用程序状态的缩减程序函数很快就会变得难以操作。如果它拥有 4        个缩减程序，每个对应一部分状态，代码将变得更容易理解、维护和扩展。好消息是，可以使用 combineReducers()        函数将任意多个缩减程序组合为单个缩减程序。
图 3 显示了在调试器后经过一次状态更改后停止的图书搜索应用程序的初期版本。
图 3. 调试在调试器的控制台中，可以看到应用程序的状态，它当时是一个对象，包含我之前列出的 4 个属性中的 2 个：topic 和          displayMode。每个属性来自一个单独的缩减程序，Redux 将这些缩减程序组合为了一个，如清单 2 所示。
清单 2. 组合后的缩减程序          (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 31 32 33

import { combineReducers } from 'redux'; const defaults = {   TOPIC:        'javascript',   DISPLAY_MODE: 'THUMBNAIL', } const topicReducer = (state = defaults.TOPIC, action) => {   switch(action.type) {     case 'SET_TOPIC':       return action.topic;     default:       return state;   } } const displayModeReducer = (state = defaults.DISPLAY_MODE, action) => {   switch(action.type) {     case 'SET_DISPLAY_MODE':       return action.displayMode;     default:       return state;   } } // Combine reducers export default combineReducers({     topic:       topicReducer,     displayMode: displayModeReducer });

清单 2 实现了一个主题缩减程序（设置状态的主题部分）和一个显示模式缩减程序（设置状态的显示模式部分）。主题和显示模式都很简单。
回想一下，当您调用 Redux dispatch() 函数来分派操作时，Redux        调用应用程序的缩减程序函数，并传递当前状态和操作。操作（它将指定一种新状态）通常有一个类型。在清单 2 中，操作类型为 SET_TOPIC 和          SET_DISPLAY_MODE。SET_TOPIC 类型的操作有一个 topic          属性，SET_DISPLAY_MODE 类型的操作有一个 displayMode        属性，分别指定其新状态。如果将一个操作发送到一个缩减程序，而且缩减程序对其不感兴趣（例如，您将一个 SET_DISPLAY_MODE        操作发送给主题缩减程序），缩减程序就会原封不动地返回当前状态。
实现缩减程序后， 将它们与 Redux combineReducers()          方法组合在一起。请注意，我将一个对象传递给 combineReducers()。
您传递给 combineReducers() 的对象定义 Redux 根据组合缩减程序创建的状态。在本例中，该状态是一个包含          topic 和 displayMode 属性的对象。topic 属性的值是从主题缩减程序返回的状态，而          displayMode 属性的值是从显示模式缩减程序返回的状态。
在本系列后面部分，将实现图书搜索应用程序的其他两个缩减程序，并将它们添加到传递给 combineReducers() 的状态对象。