添加redux

Author: yunkui.zhou

.eslintrc.js

@@ -165,7 +165,7 @@ module.exports = {
     "semi": [1, "never"],
     "semi-spacing": ["error", { "before": false, "after": true }],
     "space-before-blocks": ["error", "always"],
-    "space-before-function-paren": ["error", "always"],
+    "space-before-function-paren": [1, "always"],
     "space-in-parens": ["error", "never"],
     "space-infix-ops": "error",
     "space-unary-ops": ["error", { "words": true, "nonwords": false }],

client/pages/example/App.js

@@ -11,53 +11,53 @@ import PullRefresh from './PullRefresh'
 import Slide from './Slide'
 import Staff from './Staff'
 import UploadMore from './UploadMore'
+const routeConfig = [{
+  path: '/dashboard',
+  component: Dashboard,
+  title: '仪表盘'
+}, {
+  path: '/imgupload',
+  component: ImgUpload,
+  title: '图片上传'
+}, {
+  path: '/itemmove',
+  component: ItemMove,
+  title: '列表项可滑动'
+}, {
+  path: '/pullrefresh',
+  component: PullRefresh,
+  title: '下拉刷新'
+}, {
+  path: '/slide',
+  component: Slide,
+  title: '幻灯片'
+}, {
+  path: '/staff',
+  component: Staff,
+  title: '画布标尺'
+}, {
+  path: '/uploadmore',
+  component: UploadMore,
+  title: '上拉加载更多'
+}]
+const liCollection = []
+const routes = []
+for (let i = 0; i < routeConfig.length; i++) {
+  const item = routeConfig[i]
+  liCollection.push(<li key={item.path} className={`top-component flag${item.path.replace('/', '-')}`}>
+    <Link to={item.path}>
+      {item.title}
+    </Link>
+  </li>)
+  routes.push(<Route key={item.path} path={item.path} component={item.component}/>)
+}
 const App = (props) => {
   return (<div className="wrap">
     <ul className="sider">
-      <li className="top-component flag-dashboard">
-        <Link to="/dashboard">
-          仪表盘
-        </Link>
-      </li>
-      <li className="top-component flag-imgupload">
-        <Link to="/imgupload">
-          图片上传
-        </Link>
-      </li>
-      <li className="top-component flag-itemmove">
-        <Link to="/itemmove">
-          列表项可滑动
-        </Link>
-      </li>
-      <li className="top-component flag-pullrefresh">
-        <Link to="/pullrefresh">
-          下拉刷新
-        </Link>
-      </li>
-      <li className="top-component flag-slide">
-        <Link to="/slide">
-          幻灯片
-        </Link>
-      </li>
-      <li className="top-component flag-staff">
-        <Link to="/staff">
-          画布标尺
-        </Link>
-      </li>
-      <li className="top-component flag-uploadmore">
-        <Link to="/uploadmore">
-          上拉加载更多
-        </Link>
-      </li>
+      {liCollection}
     </ul>
     <div className="content">
-      <Route path="/dashboard" component={Dashboard}/>
-      <Route path="/imgupload" component={ImgUpload}/>
-      <Route path="/itemmove" component={ItemMove}/>
-      <Route path="/pullrefresh" component={PullRefresh}/>
-      <Route path="/slide" component={Slide}/>
-      <Route path="/staff" component={Staff}/>
-      <Route path="/uploadmore" component={UploadMore}/>
+      {routes}
     </div>
   </div>)
 }

client/pages/integration/App.js

@@ -0,0 +1,25 @@
+/**
+ * Created by ink on 2018/4/8.
+ */
+import React, {Fragment} from 'react'
+import Center from './Center'
+import Home from './Home'
+import {Switch, Route, Link} from 'react-router-dom'
+
+const App = (props) => {
+  return (
+    <Fragment>
+      <div>
+        <Link to='/home'>首页</Link>
+      </div>
+      <div>
+        <Link to='/center'>用户中心</Link>
+      </div>
+      <Switch>
+        <Route path='/home' component={Home}></Route>
+        <Route path='/center' component={Center}></Route>
+      </Switch>
+    </Fragment>
+  )
+}
+export default App

client/pages/integration/Center/index.js

@@ -0,0 +1,32 @@
+/**
+ * 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'
+
+class Center extends Component {
+  render () {
+    console.log(this.props)
+    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)

client/pages/integration/Home/index.js

@@ -0,0 +1,43 @@
+/**
+ * Created by ink on 2018/4/8.
+ */
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+import * as actions from '../redux/action'
+class Home extends Component {
+  constructor(options) {
+    super(options)
+    console.log(this.props)
+  }
+  componentDidMount() {
+    setTimeout(() => {
+      //this.props.actions.home('我是首页')
+      //通过action出发路由跳转
+      this.props.actions.jump('center')
+    }, 2000)
+  }
+  render() {
+    return (<div>
+      {this.props.title}
+    </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)

client/pages/integration/index.js

@@ -0,0 +1,34 @@
+/**
+ * Created by ink on 2018/4/8.
+ */
+import React from 'react'
+import ReactDom from 'react-dom'
+import {BrowserRouter, Router} from 'react-router-dom'
+import App from './App'
+import {createStore, applyMiddleware, combineReducers} from 'redux'
+import {Provider} from 'react-redux'
+import {createBrowserHistory} from 'history'
+import {routerReducer, routerMiddleware, push} from 'react-router-redux'
+import {center, home} from './redux/reducer'
+const history = createBrowserHistory({
+  basename: '/integration'
+})
+const middleware = routerMiddleware(history)
+
+const store = createStore(combineReducers({
+  center,
+  home,
+  router: routerReducer
+}), applyMiddleware(middleware)
+)
+// Now you can dispatch navigation actions from anywhere!
+// store.dispatch(push('/foo'))
+ReactDom.render(
+  <Provider store={store}>
+    <Router history={ history }>
+      <App/>
+    </Router>
+  </Provider>
+  ,
+  document.getElementById('bd')
+)

client/pages/integration/redux/action.js

@@ -0,0 +1,19 @@
+/**
+ * Created by ink on 2018/4/8.
+ */
+import {push} from 'react-router-redux'
+export function home (data = '') {
+  return {
+    type: 'home_title',
+    data
+  }
+}
+export function center(data = '') {
+  return {
+    type: 'center_title',
+    data
+  }
+}
+export function jump(path = '') {
+  return push(path)
+}

client/pages/integration/redux/reducer.js

@@ -0,0 +1,20 @@
+/**
+ * Created by ink on 2018/4/8.
+ */
+export function center (state = {title: '欢迎来到个人中心'}, action) {
+  switch (action.type) {
+    case 'center_title':
+      return Object.assign({}, state, {title: action.data})
+    default:
+      return state
+  }
+}
+
+export function home (state = {title: '默认首页'}, action) {
+  switch (action.type) {
+    case 'home_title':
+      return Object.assign({}, state, {title: action.data})
+    default:
+      return state
+  }
+}

package-lock.json

@@ -31,12 +31,16 @@
     "express": "^4.16.3",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "hbs": "^4.0.1",
+    "history": "^4.7.2",
     "less": "^3.0.1",
     "less-loader": "^4.1.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-router-redux": "^4.0.8",
+    "redux": "^3.7.2",
     "style-loader": "^0.20.3",
     "url-loader": "^1.0.1",
     "webpack": "^4.3.0",