[#1] - Refactored Header and ToolBar container.

src/components/Header/Header.jsx

@@ -1,12 +1,9 @@
 import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-
-import { toggleContent } from '../../redux/actions'
 
 import './Header.less'
 import Navigation from './Navigation'
-import ToolBar from './ToolBar'
 import MusicPlayer from './MusicPlayer'
+import { ToolBarContainer } from '../../containers'
 
 const menuList = [
   { name: 'Hello', link: '/hello' },
@@ -16,30 +13,24 @@ const menuList = [
   { name: 'Zhihu', link: '/pages/zhihu' }
 ]
 
-const Header = ({ musicList, pathname, dispatch }) => (
+const Header = ({ musicList, pathname, toggleContent }) => (
   <header id="header">
     <div className="logo">
-      <span onClick={() => dispatch(toggleContent())} title="立青作品">
+      <span onClick={() => toggleContent()} title="立青作品">
         <img alt="avatar" src="//o7mw3gkkh.qnssl.com/images/2016/1465649945502.png"/>
       </span>
     </div>
     <Navigation menuList={menuList} selectedUrl={pathname}/>
     <MusicPlayer songs={musicList}/>
-    <ToolBar />
+    <ToolBarContainer />
   </header>
 )
 
 Header.propTypes = {
   musicList: PropTypes.array.isRequired,
   pathname: PropTypes.string.isRequired,
-  dispatch: PropTypes.func.isRequired
+  toggleContent: PropTypes.func.isRequired
 }
 Header.defaultProps = {}
 
-function mapStateToProps(state) {
-  return {
-    pathname: state.routing.locationBeforeTransitions.pathname
-  }
-}
-
-export default connect(mapStateToProps)(Header)
+export default Header

src/components/Header/ToolBar.jsx

@@ -1,6 +1,5 @@
 import React, { Component, PropTypes } from 'react'
-import { connect } from 'react-redux'
-import { withRouter, browserHistory } from 'react-router'
+import { browserHistory } from 'react-router'
 
 class ToolBar extends Component {
   constructor(props) {
@@ -42,10 +41,4 @@ ToolBar.propTypes = {
 }
 ToolBar.defaultProps = {}
 
-function mapStateToProps(state) {
-  return {
-    posts: state.articleSummary.paginator
-  }
-}
-
-export default connect(mapStateToProps)(withRouter(ToolBar))
+export default ToolBar

src/components/index.js

@@ -0,0 +1,2 @@
+export ToolBar from './Header/ToolBar'
+export Header from './Header/Header'

src/containers/AppContainer.jsx

@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import './AppContainer.less'
-import Header from '../components/Header/Header'
+import { HeaderContainer } from '../containers'
 import * as actionCreators from '../redux/actions'
 
 class AppContainer extends Component {
@@ -12,30 +12,23 @@ class AppContainer extends Component {
   }
 
   render() {
+    console.info('AppContainer', this.props)
     return (
       <div className="main-app">
-        <Header musicList={this.props.musicList}/>
+        <HeaderContainer />
         {this.props.children}
       </div>
     )
   }
 }
 
+const { func, object } = PropTypes
 AppContainer.propTypes = {
-  musicList: PropTypes.array.isRequired,
-  fetchMusicList: PropTypes.func.isRequired,
-  children: PropTypes.object.isRequired
+  fetchMusicList: func.isRequired,
+  children: object.isRequired
 }
 AppContainer.defaultProps = {}
 
-function mapStateToProps(state) {
-  return {
-    musicList: state.musicList
-  }
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(actionCreators, dispatch)
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(AppContainer)
+export default connect(
+  (dispatch) => bindActionCreators(actionCreators, dispatch)
+)(AppContainer)

src/containers/BlogContainer.jsx

@@ -7,7 +7,7 @@ import { fetchArticleSummary } from '../redux/actions'
 import SideBar from '../components/Blog/SideBar'
 import './BlogContainer.less'
 
-class BlogPage extends Component {
+class BlogContainer extends Component {
   componentDidMount() {
     this.props.dispatch(fetchArticleSummary())
   }
@@ -36,13 +36,13 @@ class BlogPage extends Component {
   }
 }
 
-BlogPage.propTypes = {
+BlogContainer.propTypes = {
   categories: PropTypes.array.isRequired,
   showContent: PropTypes.bool.isRequired,
   dispatch: PropTypes.func.isRequired,
   children: PropTypes.object.isRequired
 }
-BlogPage.defaultProps = {}
+BlogContainer.defaultProps = {}
 
 function mapStateToProps(state) {
   return {
@@ -51,4 +51,4 @@ function mapStateToProps(state) {
   }
 }
 
-export default connect(mapStateToProps)(BlogPage)
+export default connect(mapStateToProps)(BlogContainer)

src/containers/HeaderContainer.jsx

@@ -0,0 +1,21 @@
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { Header } from '../components'
+import * as actionCreators from '../redux/actions'
+
+function mapStateToProps(state) {
+  return {
+    ...state,
+    pathname: state.routing.locationBeforeTransitions.pathname
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(actionCreators, dispatch)
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Header)

src/containers/ToolBarContainer.jsx

@@ -0,0 +1,36 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router'
+import { ToolBar } from '../components'
+
+class ToolBarContainer extends Component {
+  constructor(props) {
+    super(props)
+    console.info('ToolBarContainer', props)
+  }
+
+  render() {
+    return (
+      <ToolBar
+        posts={this.props.posts}
+        router={this.props.router}
+      />
+    )
+  }
+}
+
+ToolBarContainer.propTypes = {
+  posts: PropTypes.array.isRequired,
+  router: React.PropTypes.shape({
+    push: React.PropTypes.func.isRequired
+  }).isRequired
+}
+ToolBarContainer.defaultProps = {}
+
+function mapStateToProps(state) {
+  return { posts: state.articleSummary.paginator }
+}
+
+export default connect(
+  mapStateToProps
+)(withRouter(ToolBarContainer))

src/containers/index.js

@@ -0,0 +1,6 @@
+export AppContainer from './AppContainer'
+export BlogContainer from './BlogContainer'
+export ToolBarContainer from './ToolBarContainer'
+export HeaderContainer from './HeaderContainer'
+export Root from './Root'
+export DevTools from './DevTools'

src/redux/actions/index.js

@@ -14,12 +14,11 @@ export const FETCH_ARTICLE_SUMMARY = 'FETCH_ARTICLE_SUMMARY'
 export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'
 export const TOGGLE_CONTENT = 'TOGGLE_CONTENT'
 
-function shouldFetchArticle(state, id) {
-  if (state.article.id && state.article.id === id) {
-    return false
-  }
 
-  return true
+// TODO: refactoring to use dux modules, export default reducer but export as for action creators
+
+function shouldFetchArticle(state, id) {
+  return !(state.article.id && state.article.id === id)
 }
 
 function receiveArticle(content, id) {
@@ -92,7 +91,7 @@ export function fetchMusicList() {
     .catch(error => console.info('request error: ', error))
 }
 
-export function toggleSideBarAction() {
+export function toggleSideBar() {
   return {
     type: TOGGLE_SIDEBAR
   }