在服务端集成redux

Author: yunkui.zhou

.eslintrc.js

@@ -135,7 +135,7 @@ module.exports = {
     "no-template-curly-in-string": "error",
     "no-this-before-super": "error",
     "no-throw-literal": "error",
-    "no-trailing-spaces": "error",
+    "no-trailing-spaces": 1,
     "no-undef": "error",
     "no-undef-init": "error",
     "no-unexpected-multiline": "error",

client/pages/integration/Center/index.js

@@ -8,7 +8,6 @@ import React, {Component} from 'react'
 
 class Center extends Component {
   render () {
-    console.log(this.props)
     return (<div>欢迎来到个人中心</div>)
   }
 }

client/pages/integration/DevTools/index.js

@@ -0,0 +1,22 @@
+/**
+ * Created by ink on 2018/4/9.
+ */
+import React from 'react'
+import {createDevTools} from 'redux-devtools'
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+// createDevTools takes a monitor and produces a DevTools component
+const DevTools = createDevTools(
+  // Monitors are individually adjustable with props.
+  // Consult their repositories to learn about those props.
+  // Here, we put LogMonitor inside a DockMonitor.
+  // Note: DockMonitor is visible by default.
+  <DockMonitor
+    toggleVisibilityKey='ctrl-h'
+    changePositionKey='ctrl-q'
+    defaultIsVisible={false}>
+    <LogMonitor theme='tomorrow' />
+  </DockMonitor>
+)
+export default DevTools

client/pages/integration/Home/index.js

@@ -8,13 +8,13 @@ import * as actions from '../redux/action'
 class Home extends Component {
   constructor(options) {
     super(options)
-    console.log(this.props)
+    console.log(this.props.title)
   }
   componentDidMount() {
     setTimeout(() => {
-      //this.props.actions.home('我是首页')
+      this.props.actions.home('我是首页')
       //通过action出发路由跳转
-      this.props.actions.jump('center')
+      //this.props.actions.jump('center')
     }, 2000)
   }
   render() {

client/pages/integration/configure/store.js

@@ -0,0 +1,10 @@
+/**
+ * Created by ink on 2018/4/9.
+ */
+let configureStore
+if (process.env.NODE_ENV === 'local') {
+  configureStore = require('./store.local')
+} else {
+  configureStore = require('./store.prod')
+}
+module.exports = configureStore

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

@@ -0,0 +1,14 @@
+/**
+ * Created by ink on 2018/4/9.
+ */
+import {createStore, compose} from 'redux'
+import DevTools from '../DevTools/index'
+
+export default function configureStore(reducers, initialState = {}, enhancer) {
+  const _enhancer = compose(
+    enhancer,
+    DevTools.instrument()
+  )
+  const store = createStore(reducers, initialState, _enhancer)
+  return store
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Created by ink on 2018/4/9.
+ */
+import {createStore} from 'redux'
+export default function configureStore(reducers, initialState = {}, enhancer) {
+  const store = createStore(reducers, initialState, enhancer)
+  return store
+}

client/pages/integration/container/Root.js

@@ -0,0 +1,23 @@
+/**
+ * Created by ink on 2018/4/8.
+ */
+import {ConnectedRouter} from 'react-router-redux'
+import {Provider} from 'react-redux'
+import React from 'react'
+let ContentEnv
+if (process.env.NODE_ENV === 'local') {
+  ContentEnv = require('./Root.local')
+} else {
+  ContentEnv = require('./Root.prod')
+}
+const RealContent = ContentEnv.default
+const Root = (props) => {
+  const {store, history, component} = props
+  return (<Provider store={store}>
+    <ConnectedRouter history={history}>
+      <RealContent component={component}/>
+    </ConnectedRouter>
+  </Provider>)
+}
+export {RealContent as Content}
+export default Root

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

@@ -0,0 +1,14 @@
+/**
+ * Created by ink on 2018/4/9.
+ */
+
+import React, {Fragment} from 'react'
+import DevTools from '../DevTools/index'
+const Content = (props) => {
+  const {component: CustomerContent} = props
+  return (<Fragment>
+    <CustomerContent/>
+    <DevTools/>
+  </Fragment>)
+}
+export default Content

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

@@ -0,0 +1,10 @@
+/**
+ * Created by ink on 2018/4/9.
+ */
+import React from 'react'
+const Content = (props) => {
+  const {component: CustomerContent} = props
+  return <CustomerContent/>
+}
+
+export default Content