全面优化组件

Author: hyy1115

src/App.js

@@ -11,7 +11,7 @@ const history = createHistory()
  */
 import './app.less'
 
-import * as globalActions from 'actions/global'
+import * as global from 'actions/global'
 import asyncComponent from './AsyncComponent'
 
 import homeContainer from 'containers/Home/HomeContainer'
@@ -20,8 +20,8 @@ const Search = asyncComponent(() => import(/* webpackChunkName: "search" */ "./c
 const BookList = asyncComponent(() => import(/* webpackChunkName: "bookList" */ "./containers/BookList/BookListContainer"))
 
 @connect (
-    state => state,
-    dispatch => bindActionCreators(globalActions, dispatch)
+    state => {return {...state.global}},
+    dispatch => bindActionCreators(global, dispatch)
 )
 export default class App extends React.Component {
 
@@ -32,7 +32,7 @@ export default class App extends React.Component {
     }
 
   render() {
-      const { animateCls } = this.props.global
+      const { animateCls } = this.props
       return (
           <Router history={history}>
               <Route render={({ location }) => {

src/containers/BookList/BookListContainer.js

@@ -1,26 +1,17 @@
 /**
  * Created by Administrator on 2016/7/1.
  */
-import React from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 
-/*component*/
-
-@connect(
-    state => state
-)
 export default class BookListContainer extends React.Component {
 
     constructor(props) {
         super(props);
     }
 
-    componentWillMount() {
-
-    }
-
     render() {
         const { match } = this.props
         return(

src/containers/Home/HomeContainer.js

@@ -9,8 +9,8 @@ import PropTypes from 'prop-types'
 //关于import什么时候用{}，什么时候不用大括号，通过那个插件或者组件是否包含default来判断，如果包含，则不需要{}
 
 /*actions*/
-import * as homeActions from 'actions/home'
-import * as globalActions from 'actions/global'
+import * as home from 'actions/home'
+import * as global from 'actions/global'
 
 /*component*/
 import Header from 'components/Home/Header'
@@ -26,13 +26,13 @@ import 'containers/Home/styles/home.less'
 /**
  * connect中间件
  * connect一定要写在需要传递参数的组件头部，因为这是语法规则，只对当前关联的组件生效，和java的原理是一致的
- * state用法：state => state（传递全部state）
+ * state用法：state => state（传递全部state）， {return {...state.home, ...state.global}}（n个state）
  * dispatch用法：（单个action）bindActionCreators(navActions, dispatch)，（多个action）bindActionCreators({...action1, ...action2}, dispatch)
  */
 
 @connect(
     state => {return {...state.home}},
-    dispatch => bindActionCreators({...homeActions, ...globalActions}, dispatch)
+    dispatch => bindActionCreators({...home, ...global}, dispatch)
 )
 export default class HomeContainer extends React.Component {
 

src/containers/Search/SearchContainer.js

@@ -7,20 +7,19 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 /*actions*/
-import * as searchActions from 'actions/search'
-import * as globalActions from 'actions/global'
+import * as search from 'actions/search'
+import * as global from 'actions/global'
 
 import Header from 'components/Search/Header'
 import HotSearch from 'components/Search/HotSearch'
 
 import 'containers/Search/styles/search.less'
 
 @connect(
-    state => state,
-    dispatch => bindActionCreators({...searchActions, ...globalActions}, dispatch)
+    state => {return {...state.search}},
+    dispatch => bindActionCreators({...search, ...global}, dispatch)
 )
 export default class SearchContainer extends React.Component {
-
     constructor(props) {
         super(props)
         this.hotClick = this.hotClick.bind(this)
@@ -29,25 +28,21 @@ export default class SearchContainer extends React.Component {
             currentHot: ''
         }
     }
-
     componentWillMount() {
         console.log('进入搜索页面')
         this.props.receiveHotSearch()
     }
-
     upDateValue(value) {
         this.setState({currentHot: value})
     }
-
     hotClick(text) {
         this.setState({currentHot: text})
     }
-
     render() {
-        const { hotData } = this.props.search
+        const { hotData } = this.props
         const { currentHot } = this.state
         return (
-            <div key={this.props} style={{height: '100vh'}}>
+            <div style={{height: '100vh'}}>
                 <Header handleClick={this.props.currentAnimate}
                         currentHot={currentHot}
                         upDateValue={this.upDateValue}
@@ -78,7 +73,6 @@ export default class SearchContainer extends React.Component {
         )
     }
 }
-
 SearchContainer.propTypes = {
     hotData: PropTypes.array
 }