提取store公用部分

Author: yunkui.zhou

client/pages/integration/Center/index.js

@@ -1,31 +1,18 @@
 /**
  * Created by ink on 2018/4/8.
  */
-import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
 import * as actions from '../redux/action'
 import React, {Component} from 'react'
+import connect from '../../tools/connect'
 
 class Center extends Component {
   render () {
     return (<div>欢迎来到个人中心</div>)
   }
 }
-const mapStateToProps = state => {
-  return {
-    title: state.center.title,
-    router: state.router
-  }
-}
-/**
- * 如果不显示的设置返回dispatch，那么原先在组件内可通过this.props访问的dispatch将消失
- * @param dispatch
- * @returns {{actions: (A|B|M|N)}}
- */
-const mapDispatchToProps = dispatch => {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    //dispatch
-  }
-}
-export default connect(mapStateToProps, mapDispatchToProps)(Center)
+export default connect({
+  title: state => state.center.title,
+  router: state => state.router
+}, {
+  actions
+})(Center)

client/pages/integration/Home/index.js

@@ -2,13 +2,11 @@
  * Created by ink on 2018/4/8.
  */
 import React, {Component} from 'react'
-import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
+import connect from '../../tools/connect'
 import * as actions from '../redux/action'
 class Home extends Component {
   constructor(options) {
     super(options)
-    console.log(this.props.title)
   }
   componentDidMount() {
     setTimeout(() => {
@@ -23,21 +21,9 @@ class Home extends Component {
     </div>)
   }
 }
-const mapStateToProps = state => {
-  return {
-    title: state.home.title,
-    router: state.router
-  }
-}
-/**
- * 如果不显示的设置返回dispatch，那么原先在组件内可通过this.props访问的dispatch将消失
- * @param dispatch
- * @returns {{actions: (A|B|M|N)}}
- */
-const mapDispatchToProps = dispatch => {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    //dispatch
-  }
-}
-export default connect(mapStateToProps, mapDispatchToProps)(Home)
+export default connect({
+  title: state => state.home.title,
+  router: state => state.router
+}, {
+  actions
+})(Home)

client/pages/integration/container/Root.local.js client/pages/integration/Root/Local.js

@@ -3,7 +3,7 @@
  */
 
 import React, {Fragment} from 'react'
-import DevTools from '../DevTools/index'
+import DevTools from '../../tools/DevTools/index'
 const Content = (props) => {
   const {component: CustomerContent} = props
   return (<Fragment>

client/pages/integration/container/Root.prod.js client/pages/integration/Root/Prod.js

@@ -6,9 +6,9 @@ import {Provider} from 'react-redux'
 import React from 'react'
 let ContentEnv
 if (process.env.NODE_ENV === 'local') {
-  ContentEnv = require('./Root.local')
+  ContentEnv = require('./Local')
 } else {
-  ContentEnv = require('./Root.prod')
+  ContentEnv = require('./Prod')
 }
 const RealContent = ContentEnv.default
 const Root = (props) => {

client/pages/integration/container/Root.js client/pages/integration/Root/index.js

@@ -3,9 +3,11 @@
  */
 import React from 'react'
 import ReactDom from 'react-dom'
-import Root from './container/Root'
+import Root from './Root/index'
 import App from './App'
-import store, {history} from './store/forBrowser'
+import storeFactory, {history} from '../tools/store/forBrowser'
+import reducers from './store/'
+const store = storeFactory(reducers)
 ReactDom.hydrate(
   <Root store={store} history={history} component={App} />,
   document.getElementById('bd')

client/pages/integration/index.js

@@ -0,0 +1,12 @@
+/**
+ * Created by ink on 2018/4/10.
+ */
+import {center, home} from '../../integration/redux/reducer'
+import {routerReducer} from 'react-router-redux'
+
+const reducers = {
+  center,
+  home,
+  router: routerReducer
+}
+export default reducers

client/pages/integration/store/common.js

@@ -15,6 +15,8 @@ const DevTools = createDevTools(
   <DockMonitor
     toggleVisibilityKey='ctrl-h'
     changePositionKey='ctrl-q'
+    changeMonitorKey='ctrl-m'
+    defaultPosition="top"
     defaultIsVisible={false}>
     <LogMonitor theme='tomorrow' />
   </DockMonitor>

client/pages/integration/store/forServer.js

@@ -0,0 +1,38 @@
+/**
+ * Created by ink on 2018/3/6.
+ */
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+//PipeConnect({
+//  someProps: (state) => {
+//    return state.get('someProps')
+//  }
+//}, {
+//  Actions: action,
+//  AppAction: appAction
+//})(component)
+const pipeConnect = (props, actions) => {
+  const mapStateToProps = state => {
+    const obj = {}
+    Object.keys(props).forEach(key => {
+      const v = props[key]
+      if (typeof v !== 'function') {
+        obj[key] = v
+      } else {
+        obj[key] = v(state)
+      }
+    })
+    return obj
+  }
+  const mapDispatchToProps = (dispatch) => {
+    const obj = {}
+    Object.keys(actions).forEach(key => {
+      obj[key] = bindActionCreators(actions[key], dispatch)
+    })
+    return obj
+  }
+  return (component) => {
+    return connect(mapStateToProps, mapDispatchToProps)(component)
+  }
+}
+export default pipeConnect

client/pages/integration/store/index.js

@@ -0,0 +1,9 @@
+/**
+ * Created by ink on 2018/4/10.
+ */
+import thunkMiddleware from 'redux-thunk'
+
+const middleware = [thunkMiddleware]
+
+export {middleware}
+export default {middleware}

client/pages/integration/DevTools/index.js client/pages/tools/DevTools/index.js

@@ -1,7 +1,7 @@
 /**
  * Created by ink on 2018/4/10.
  */
-import {reducers, middleware} from './common'
+import {middleware} from './common'
 import {routerMiddleware} from 'react-router-redux'
 import {applyMiddleware, combineReducers} from 'redux'
 import {createBrowserHistory} from 'history'
@@ -12,10 +12,12 @@ const history = createBrowserHistory({
 
 const middlewares = middleware.concat(routerMiddleware(history))
 
-const store = configureStore(
-  combineReducers(reducers),
-  {},
-  applyMiddleware(...middlewares)
-)
+const store = reducers => {
+  return configureStore(
+    combineReducers(reducers),
+    {},
+    applyMiddleware(...middlewares)
+  )
+}
 export {history}
 export default store

client/pages/integration/configure/store.js client/pages/tools/configure/store.js

@@ -0,0 +1,14 @@
+/**
+ * Created by ink on 2018/4/10.
+ */
+import {middleware} from './common'
+import {applyMiddleware, combineReducers} from 'redux'
+import configureStore from '../configure/store'
+const store = reducers => {
+  return configureStore(
+    combineReducers(reducers),
+    {},
+    applyMiddleware(...middleware)
+  )
+}
+export default store

client/pages/integration/configure/store.local.js client/pages/tools/configure/store.local.js

@@ -7,16 +7,16 @@ import path from 'path'
 import React from 'react'
 import {renderToString} from 'react-dom/server'
 
-import App from '../client/pages/example/App'
+import Component from '../client/pages/example/App'
 import extractMapping from './middleware/extractMapping'
 import mapAssets from './utils/mapAssets'
 import {StaticRouter} from 'react-router'
 
 import {Provider} from 'react-redux'
-import store from '../client/pages/integration/store/forServer'
-import {Content} from '../client/pages/integration/container/Root'
+import store from '../client/pages/tools/store/forServer'
+import {Content} from '../client/pages/integration/Root/index'
 import Integration from '../client/pages/integration/App'
-
+import reducers from '../client/pages/integration/store/'
 const app = express()
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'hbs')
@@ -46,7 +46,7 @@ app.use('/components', extractMapping, (req, res, next) => {
     location={req.url}
     context={{}}
     basename="/components">
-    <App/>
+    <Component/>
   </StaticRouter>)
   res.render('components', {
     app: content,
@@ -56,7 +56,7 @@ app.use('/components', extractMapping, (req, res, next) => {
 })
 
 app.use('/integration', extractMapping, (req, res, next) => {
-  const content = renderToString(<Provider store={store}>
+  const content = renderToString(<Provider store={store(reducers)}>
     <StaticRouter
       location={req.url}
       context={{}}