4.3 Containers & Components

1.Presentational and Container Components

Presentational Components Container Components
Purpose
——-
How things look (markup, styles) How things work (data fetching, state updates)
Aware of Redux
——-
No Yes
To read data
——-
Read data from props Subscribe to Redux state
To change data
——-
Invoke callbacks from props Dispatch Redux actions
Are written
——-
By hand Usually generated by React Redux

2.components/home-view & containers/HomeView

2.1 home-view components

4.3 Containers & Components - 图1

2.2 HomeView container

1. import {
2. Header,
3. Main,
4. } from '../components/home-view';
5. import Actions from '../actions';

7. class HomeView extends Component {
8. render() {
9. return (
10. <View>
11. <Header {...this.props}/>
12. <Main {...this.props} isVisible={this.state.isVisible}/>
13. </View>
14. );
15. }
16. }

18. function mapStateToProps(state) {
19. return {
20. todos: state.todos
21. };
22. }

24. function mapDispatchToProps(dispatch) {
25. return {
26. actions: bindActionCreators(Actions, dispatch)
27. }
28. }

30. export default connect(
31. mapStateToProps,
32. mapDispatchToProps
33. )(HomeView);

原文: https://unbug.gitbooks.io/react-native-training/content/43containers&_components.html