应用程序组件现在您已经了解了如何组合缩减程序，我将暂时偏离主题，介绍一下应用程序的组件
应用程序组件该应用程序（由 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() 将这些属性传递给这个无状态组件。 |
