结合使用 Redux 和 React-3

look_w

组件首先，我将创建该应用程序的一个原型，如图 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()）来创建操作对象。这些函数称为操作创建器。