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

结合使用 Redux 和 React-2

结合使用 Redux 和 React-2

不同于 Stoplight 组件,Buttons 组件中的按钮会发起改变状态的行为,所以          ButtonContainer 将 dispatch() 调用映射到 Buttons 属性。这些属性是          Buttons 组件使用的函数,如清单 5 所示。
清单 5. Buttons 组件        (buttons.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
import React, { Component } from 'react';

export const Buttons = ({
  go,
  caution,
  stop,
  lightStatus
}) => {
  return(
    <div style={{textAlign: 'center'}}>
      <button onClick={go}
              disabled={lightStatus == 'GO' || lightStatus == 'CAUTION'}
              style={{cursor: 'pointer'}}>
        Go
      </button>

      <button onClick={caution}
              disabled={lightStatus == 'CAUTION' || lightStatus == 'STOP'}
              style={{cursor: 'pointer'}}>
        Caution
      </button>

      <button onClick={stop}
              disabled={lightStatus == 'STOP' || lightStatus == 'GO'}
              style={{cursor: 'pointer'}}>
        Stop
      </button>
    </div>
  )
}




清单 5 中的 Buttons 组件使用它的 go、caution 和          stop 属性(都是函数)作为每个按钮的 onClick 处理函数的回调。这些属性来自          ButtonContainer 组件。请注意,像 Stoplight 组件一样,Buttons        组件已恢复为无状态功能组件。
表示组件与容器组件的分离被动视图设计模式将抓取和显示数据的操作混合在一个组件中,这会让该组件很难测试。相反,可通过一个容器组件来分离关注点,该组件抓取数据并传递给关联的表示组件。表示组件是一个无状态组件,仅显示数据且容易测试。此方法实质上实现了 。

react-redux 绑定不仅提供了与 Redux 存储的自动连接,还通过将关注点分离到容和关联的无状态组件来帮助执行良好的编程实践。容器组件实现          mapStateToProps()(用于将状态映射到数据)和        mapDispatchToProps()(用于将状态映射到行为)。这种分离有诸多好处:
  • 表示组件很容易实现和推断。
  • 表示组件很容易测试,因为它们不会改变数据。
  • 表示组件可在不同数据源中重用。
  • 容器组件很容易测试,因为它们没有表示代码。
react-redux 绑定的 connect() 函数已介绍得足够多了;现在让我们来看看 React Provider        组件。
Redux 提供程序使用 Redux 的 connect() 函数的一个良好的辅助影响是,Stoplight 和          Buttons 等无状态功能组件不再需要直接访问 Redux 存储 — 因为这些组件不再根据状态来计算它们的属性。相反,相应的容器组件将        Redux 存储与应用程序的无状态功能组件联系起来。这种安排使得无状态功能组件(比如 Stoplight 和 Button        的最终版本)更容易测试。
但是,容器组件仍访问应用程序状态,将它映射到容器包含的无状态组件的属性。要使 Redux 存储可用于应用程序的 React 组件,可以在组件分层结构中显式向下传递它,或者可以使用          Provider,如清单 6 所示。
清单 6. 使用            Provider 组件        (index.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import ReactDOM from 'react-dom';
import Redux, { createStore } from 'redux';
import { Provider } from 'react-redux';

import { reducer } from './reducer';
import { App } from './app';

ReactDOM.render(
  <Provider store={createStore(reducer)}>
    <App />
  </Provider>,
  document.getElementById('root')
)




您为 Provider 指定的属性自动可用于 Provider 组件中包含的任何 React          组件。在本例中,App 组件(以及 App 组件中包含的 StoplightContainer 和          ButtonContainer 组件)会自动获取 Redux 存储的访问权。
目前您已通过一个简单应用程序了解了 Redux 基础原理和 react-redux 绑定,该应用程序具有最简单的状态 — 单个字符串。要理解 Redux        的更高级方面,是时候查看一个更复杂的应用程序了。
图书搜索应用程序您已深入掌握 Redux,但仍有许多基础知识需要介绍,其中包括:
  • 实现和使用操作创建器
  • 组合缩减程序
  • 创建异步操作
  • 实现撤销和重做
  • 实现状态时间线
我将使用图 1 中所示的应用程序来演示前面提到的这些主题,本期文章将介绍第一个主题,剩余主题以后再介绍。图书搜索应用程序使用 Google Books REST API        异步搜索图书。用户在文本字段中输入一个主题并按 Enter 键后,应用程序抓取前 10 部与该主题匹配的图书的信息,显示每部图书的封面缩略图。
图 1. 图书搜索应用程序图书缩略图是链接。单击缩略图,就会在 books.google.com 上看到该图书的更多信息,如图 2 所示。
图 2. 单击一个图书缩略图的结果该应用程序提供了一种替代性的列表视图,如图 3 所示。可单击 List 单选按钮来激活列表视图。
图 3. 列表视图最后,该应用程序支持撤销(通过单击向左箭头)和重做(通过单击向右箭头),以及一个可在应用程序的以前状态中前后移动的历史滑块。
以上是图书搜索应用程序的概述。接下来,我将介绍如何使用 React 和 Redux 实现该应用程序。
返回列表