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