index redux

Author: Z-wave

README.md

@@ -33,6 +33,9 @@
     "react-grid-layout": "^0.10.0-beta1",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-redux": "^5.0.7",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0",
     "sass-loader": "^6.0.6",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",

package.json

@@ -104,12 +104,12 @@ $view-width:640px !default;
 //*font------------------------------------------------------------------------------*/
 @font-face {
     font-family: 'iconfont';  /* project id 580276 */
-    src: url('//at.alicdn.com/t/font_580276_eu3j0dmg7pe0o1or.eot');
-    src: url('//at.alicdn.com/t/font_580276_eu3j0dmg7pe0o1or.eot?#iefix') format('embedded-opentype'),
-    url('//at.alicdn.com/t/font_580276_eu3j0dmg7pe0o1or.woff') format('woff'),
-    url('//at.alicdn.com/t/font_580276_eu3j0dmg7pe0o1or.ttf') format('truetype'),
-    url('//at.alicdn.com/t/font_580276_eu3j0dmg7pe0o1or.svg#iconfont') format('svg');
-  }
+    src: url('//at.alicdn.com/t/font_580276_ts03f1ux1tdl5wmi.eot');
+    src: url('//at.alicdn.com/t/font_580276_ts03f1ux1tdl5wmi.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_580276_ts03f1ux1tdl5wmi.woff') format('woff'),
+    url('//at.alicdn.com/t/font_580276_ts03f1ux1tdl5wmi.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_580276_ts03f1ux1tdl5wmi.svg#iconfont') format('svg');
+}
 %iconfont{
   font-family:"iconfont"!important;  
   font-size:R(16);

react-example.rar

@@ -1,5 +1,7 @@
 global.ROOT_URL = process.env.NODE_ENV !== 'production' ? '' : 'https://cnodejs.org/api'; 
 
+global.isLoad = true
+
 global.getQueryString = function(name){
     return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
 }    

src/assets/scss/common.scss

@@ -22,7 +22,6 @@ export class Header extends Component {
             <header className="index-bar">
                 {back}
                 <span className="title">{title}</span>
-                <a className="iconfont question"></a>
             </header>
         );
     }

src/assets/scss/wallet.scss

@@ -2,17 +2,17 @@ import React from 'react';
 import { BrowserRouter, HashRouter, Switch, Route, Redirect} from 'react-router-dom';
 
 import home from '../views/index';
-import product from '../views/order/product';
+import detail from '../views/detail';
 
 
 const routes = [
 	{ path: '/',
 		exact: true,
 		component: home
 	},
-	{ path: '/order/product',
+	{ path: '/detail/:id',
 		exact: false,
-		component: product
+		component: detail
 	}
 ];
 

src/assets/scss/zmxy.scss

@@ -1,24 +1,20 @@
+import axios from 'axios';
+
 export function setPageTitle (data) {
     return (dispatch, getState) => {
       dispatch({ type: 'SET_PAGE_TITLE', data: data })
     }
-  }
+}
 
-  export function setInfoList (data) {
+export function setIndexList (data) {
     return (dispatch, getState) => {
-      // 使用fetch实现异步请求
-    //   window.fetch('/api/getInfoList', {
-    //       method: 'GET',
-    //       headers: {
-    //           'Content-Type': 'application/json'
-    //       }
-    //   }).then(res => {
-    //       return res.json()
-    //   }).then(data => {
-    //       let { code, data } = data
-    //       if (code === 0) {
-    //           dispatch({ type: 'SET_INFO_LIST', data: data })
-    //       }
-    //   })
+        axios.get('/v1/topics',{
+            params:data
+        }).then(data => {
+            if(data.status == 200){
+                dispatch({ type: 'SET_INDEX_LIST', data: data.data.data })
+                global.isLoad = true
+            }
+        })
     }
-  }
+}

src/components/common/common.jsx

@@ -1,10 +1,17 @@
+// applyMiddleware: redux通过该函数来使用中间件
+// createStore: 用于创建store实例
 import { applyMiddleware, createStore } from 'redux'
+
+// 中间件，作用：如果不使用该中间件，当我们dispatch一个action时，需要给dispatch函数传入action对象；但如果我们使用了这个中间件，那么就可以传入一个函数，这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用，对于异步action很有用
 import thunk from 'redux-thunk'
-import reducers from './reducers.jsx'
+
+// 引入reducer
+import reducers from './reducers'
 
 // 创建store实例
 let store = createStore(
   reducers,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
   applyMiddleware(thunk)
 )
 

src/components/common/index.jsx

@@ -1,26 +1,27 @@
-import { combineReducers } from 'redux'
-import defaultState from './state.jsx'
+// 工具函数，用于组织多个reducer，并返回reducer集合
+import {combineReducers} from 'redux'
+// 默认值
+import defaultState from './state'
 
-function pageTitle (state = defaultState.pageTitle, action) {
-  switch (action.type) {
-    case 'SET_PAGE_TITLE':
-      return action.data
-    default:
-      return state
-  }
+// 一个reducer就是一个函数
+function pageTitle(state = defaultState.pageTitle, action) {
+    // 不同的action有不同的处理逻辑
+    switch (action.type) {
+        case 'SET_PAGE_TITLE':
+            return action.data
+        default:
+            return state
+    }
 }
 
-function infoList (state = defaultState.infoList, action) {
-  switch (action.type) {
-    case 'SET_INFO_LIST':
-      return action.data
-    default:
-      return state
-  }
+function indexList(state = defaultState.indexList, action) {
+    switch (action.type) {
+        case 'SET_INDEX_LIST':
+            return action.data
+        default:
+            return state
+    }
 }
 
 // 导出所有reducer
-export default combineReducers({
-    pageTitle,
-    infoList
-})
+export default combineReducers({pageTitle, indexList})

src/router/index.jsx

@@ -1,4 +1,4 @@
 export default {
     pageTitle: '首页',
-    infoList: []
+    indexList: []
 }

src/store/actions.jsx

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import {Route,BrowserRouter, Switch,Link} from 'react-router-dom';
+import axios from 'axios';
+import {Header,Footer} from '../components/common/index';
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            data:{
+                author:{}
+            }
+        };
+    }
+    
+    componentDidMount() {
+        let id = this.props.match.params.id
+
+        axios.get('/v1/topic/'+id).then((res)=>{
+            this.setState({
+                data:res.data.data
+            })
+        })
+    }
+
+
+    render() {
+        let {author} = this.state.data
+        console.log(author);
+        return (
+            <div id="wrapper" className="spacing">
+            <Header title="主题详情" leftTo="/" />
+            <div className="box box-items">
+                <div className="pic">
+                    <img src={author.avatar_url} alt="" />
+                </div>
+                <div className="flex-1 ml5">
+                    <p>{author.loginname}</p>
+                    <p>1天前</p>
+                </div>
+                <div className="flex-1 text-right">
+                    <p>7/849</p>
+                    <p>2小时前</p>
+                </div>
+            </div>
+            <Footer />
+            </div>
+        );
+    }
+}
+
+
+export default App;