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

使用 Redux 实现异步操作(3)

使用 Redux 实现异步操作(3)

应用程序组件现在您已经了解了如何组合缩减程序,我将暂时偏离主题,介绍一下应用程序的组件
应用程序组件该应用程序(由 App 组件表示)如清单 3 所示。
清单 3. App 组件 (containers/app.js)        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import ControlsContainer from './controls';

const titleStyle = {
  fontFamily: 'tahoma',
  fontSize: '24px',
  textAlign: 'center'
}

const Title = () => (
  <div style={titleStyle}>
    Book Search
  </div>
);

export const App = () => (
  <div>
    <Title />
    <hr/>
    <ControlsContainer />
  </div>
)




就像表示整个应用程序的 React 组件的常见情况一样,清单 3 中的 App 组件仅包含其他组件 —        在本例中为一个标题、一个水平标尺和一个控件容器组件。
控制组件在   中,您看到了 React/Redux 应用程序中的组件通常由两个不同的组件组成:一个连接到 Redux 存储的容器和一个无状态表示组件。您还从第 2        部分中了解到,无状态表示组件的好处有很多。
图书搜索应用程序的控制组件可以以类似方式拆分为两个组件。清单 4 显示了连接的容器的代码。
清单 4. 控制容器          (containers/controls.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { connect } from 'react-redux';
import Controls from '../components/controls';

const mapStateToProps = state => {
  return {
    topic: state.topic,
    displayMode: state.displayMode
  }
}

const mapDispatchToProps = null;

export default connect({
  mapStateToProps,
  mapDispatchToProps
)(Controls);




清单 4 中的控制容器将应用程序状态映射到 Controls 组件的属性。我们知道,此刻的应用程序状态由一个主题和应用程序的显示模式组成。
控制容器没有任何分派功能与 Controls 无状态组件的属性对应,所以它传递一个 null 值作为 Redux          connect() 函数的第二个参数。
清单 5 给出了相应的无状态组件的代码。
清单 5. 无状态控制组件          (components/controls.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
import React from 'react';
import DisplayModeContainer from '../containers/displayMode';
import TopicSelectorContainer from '../containers/topicSelector';

const Controls = ({
  topic,
  displayMode
}) => {
  const styles = {
    controls: {
      padding: '15px',
      marginBottom: '25px'
    }
  };

  return(
    <div style={styles.controls}>
      <TopicSelectorContainer topic={topic} />
      <DisplayModeContainer displayMode={displayMode} />
    </div>
  );
}

Controls.propTypes = {
  topic: React.PropTypes.string.isRequired
};

export default Controls;




Controls 无状态组件包含针对主题选择器和显示模式的容器组件。Controls          组件的有趣之处在于它的属性:topic 和 displayMode。Redux 通过调用 清单 4 中的 connect() 将这些属性传递给这个无状态组件。
返回列表