react+react-router+react-redux全家桶小項(xiàng)目開(kāi)發(fā)過(guò)程分享

zzir 發(fā)布于2019-08-20 15:11 / 1461人閱讀

摘要：項(xiàng)目地址下載完項(xiàng)目然后即可基于的項(xiàng)目，主要是為了學(xué)習(xí)實(shí)戰(zhàn)。數(shù)據(jù)都是固定的，從餓了么接口臨時(shí)抓的，模擬了一個(gè)的異步數(shù)據(jù)延遲，感謝餓了么。詳細(xì)信息可以看上面的官方文檔，我這里就簡(jiǎn)單說(shuō)一下我這個(gè)項(xiàng)目的應(yīng)用。

react-ele-webapp

項(xiàng)目地址：https://github.com/kliuj/reac...

run

下載完項(xiàng)目

npm install

然后

npm run dev 即可

基于 react react-router redux 的項(xiàng)目，主要是為了學(xué)習(xí)實(shí)戰(zhàn)react。數(shù)據(jù)都是固定的，從餓了么接口臨時(shí)抓的，模擬了一個(gè)0-100ms的異步數(shù)據(jù)延遲，感謝餓了么。

以下內(nèi)容是項(xiàng)目開(kāi)發(fā)的過(guò)程和一些思考，按照這個(gè)過(guò)程至少能保證實(shí)現(xiàn)一個(gè)相對(duì)完整的react全家桶項(xiàng)目

內(nèi)容參考

react文檔：http://reactjs.cn/react/docs/...

react-router 文檔地址 :https://reacttraining.com/rea...

react-router 中文版參考：http://www.uprogrammer.cn/rea...

redux文檔參考：http://redux.js.org/

redux中文文檔：http://cn.redux.js.org/

搭建項(xiàng)目:

建立項(xiàng)目目錄，安裝package.json，配置webpack.config
做好基礎(chǔ)依賴(lài)工作，摘自package.json的一部分內(nèi)容

    "devDependencies": {
        "babel-core": "^6.23.1",
        "babel-loader": "^6.4.0",
        "babel-preset-es2015": "^6.22.0",
        "babel-preset-react": "^6.23.0",
        "html-webpack-plugin": "^2.28.0",
        "jshint": "^2.9.4",
        "jshint-loader": "^0.8.4",
        "react": "^15.2.0",
        "react-dom": "^15.2.0",
        "react-router": "^2.0.0",
        "redux": "^3.6.0",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.4.1"
    } //JAVASCRIPT

項(xiàng)目模塊結(jié)構(gòu)組織一些基礎(chǔ)工作

開(kāi)始進(jìn)行開(kāi)發(fā)一個(gè)項(xiàng)目除了技術(shù)選型之外，還有許多基礎(chǔ)東西要先設(shè)計(jì)好，一個(gè)好的組織設(shè)計(jì)要可以為以后的提高工作效率。我這方面還有很多欠缺，目前主要考慮了3個(gè)模塊的設(shè)計(jì)：

1:后臺(tái)接口通信層：model.js  主要處理統(tǒng)一接口的請(qǐng)求發(fā)送和回調(diào)，放在一起更有利于后期維護(hù)，也增加可閱讀性

    //接口對(duì)應(yīng)的url，這里只做演示
    const uris = {
          index_entry : fetchData.index_entry,
          hot_search_words : fetchData.hot_search_words
    }
    //接口調(diào)用層
    export default function send(url,postData,successCallback,errCallback){
        //模擬延遲，假接口
        let promise = new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve(fetchData[url])
            },Math.random()*100)
        })
        promise.then(function(data){
            successCallback(data)
        })
    }

2:本地?cái)?shù)據(jù)緩存維護(hù)：baseStore.js  主要處理頁(yè)面之間的跳轉(zhuǎn)返回，增加更多的自主性和擴(kuò)展性

    // 自動(dòng)存儲(chǔ)瀏覽記錄
    export function  saveFrom(prop) {
          let name = prop.pagename,
              transit =  prop.location,
              qhfrom = transit.query.qhfrom ,//默認(rèn)全部返回首頁(yè)
              para = transit.query.para ? JSON.parse(transit.query.para) : "";
          if(!qhfrom) return false;
          let paths  = localStorage.getItem("FromUrlStore") ? JSON.parse(localStorage.getItem("FromUrlStore")) : {};
          if (localStorage) {
            paths[name] = {
              "name":qhfrom,//存儲(chǔ)來(lái)源頁(yè)面
              "para":para //存儲(chǔ)來(lái)源頁(yè)面的參數(shù)
            }
            localStorage.setItem("FromUrlStore", JSON.stringify(paths));
          }
      }
   //存儲(chǔ)頁(yè)面的來(lái)源，統(tǒng)一管理

3:公共方法的處理:baseFun.js 主要用來(lái)定義一些公用的模塊方法

    //放置公用函數(shù) 
    export function showToast(){
        ...
    }

使用react-router初始化頁(yè)面

    import React from "react"
     import { render } from "react-dom"
     import { Router, Route, Link,hashHistory ,IndexRedirect,IndexRoute} from "react-router"
     import Home from "./components/home.jsx"
     import Discover from "./components/discover.jsx"
     const App = React.createClass({
       render() {
         return (
           
             
                 外賣(mài) 
                 發(fā)現(xiàn)
             
             {this.props.children}
           
         )
       }
     })
     const route = (
          
             
               
               
               
             
           
     )
     render(route, document.getElementById("app"))

代碼簡(jiǎn)單介紹：
因?yàn)闆](méi)有后臺(tái)，采用的 hashHistory （hash路由），關(guān)于hash路由可以參考：https://github.com/kliuj/spa-... 有簡(jiǎn)單的介紹。

這個(gè)是router的跳轉(zhuǎn) 外賣(mài)
這個(gè)是加載子路由組件 {this.props.children}
這個(gè)是默認(rèn)的跳轉(zhuǎn)頁(yè)面

處理首頁(yè)的滾動(dòng)列表

首頁(yè)主要分成了4個(gè)組件
底部導(dǎo)航 + 滾動(dòng)列表 + 單個(gè)產(chǎn)品 + 首頁(yè)搜索框

滾動(dòng)列表封裝了一個(gè)簡(jiǎn)單的組件

    
    在scrollList組件里面監(jiān)聽(tīng)了滾動(dòng)事件進(jìn)行自動(dòng)加載的處理

react-redux 處理登錄和登出

使用redux的原因：用戶(hù)信息和登錄是兩個(gè)不同的組件，也沒(méi)有父子級(jí)的關(guān)系，但是需要進(jìn)行數(shù)據(jù)狀態(tài)共享和相互影響。詳細(xì)信息可以看上面的官方文檔，我這里就簡(jiǎn)單說(shuō)一下我這個(gè)項(xiàng)目的應(yīng)用。

定義常量 actionTypes.js

    //登入成功
    export const LOG_SUCCESS = "LOG_SUCCESS"
    //正在登錄
    export const LOG_ING = "LOG_ING"
    //注銷(xiāo)登錄
    export const LOG_OUT = "LOG_OUT"
    //主要是統(tǒng)一保存狀態(tài)對(duì)應(yīng)的名稱(chēng)

定義具體的觸發(fā)操作 actions/login.js

    //注銷(xiāo) 同步
    export function log_out (){
        return {
            type:actionTypes.LOG_OUT
        }
    }
    //登入 異步
    export function log_in (obj){
        return dispatch=>{
            //pending  正在進(jìn)行登錄的狀態(tài)
            dispatch({type:actionTypes.LOG_ING})
            //開(kāi)始發(fā)送異步請(qǐng)求登錄
            new Promise((resolve,reject)=>{
                ...
            }).then(res=>{
                dispatch(res)
            })
        }
    }
    //異步狀態(tài)需要使用中間件

處理數(shù)據(jù) reducers/login.js

    export default function(state = initialData,action){
        switch(action.type){
            case actionTypes.LOG_SUCCESS:
                return {
                    loginstate:1,
                    username:action.username
                }
                break
            case actionTypes.LOG_ING:
                return{
                    loginstate:-1,
                    username:"正在登錄"
                }   
            case actionTypes.LOG_OUT:
                return initialData
                break
            default :
                return initialData  
        }
    }

使用中間件創(chuàng)建store層  store/store.js

    import {createStore, applyMiddleware} from "redux"
    import thunk from "redux-thunk"
    //合并的多個(gè)reducer，解耦
    import rootReducer from "../reducers/index.js"
    const middlewares = [thunk]
    const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
    export default function configureStore(initialState){
        return createStoreWithMiddleware(rootReducer,initialState)
    }

在路由層引入

    import {Provider} from "react-redux"
    const store = configureStore()
    const route = (
      
          
              ...
          
      
    )

組件里面使用

    import { connect } from "react-redux"
    import {log_out} from "../../actions/login.js" //操作
    ...
    ...
    function mapStateToProps(userinfo){
        let {login} = userinfo //這個(gè)是返回的所有reducer，我們只用當(dāng)前需要的，參考 reducers/index.js 內(nèi)容
        return login
    }
    export default connect(mapStateToProps)(UserInfo)
    //這個(gè)時(shí)候就可以在當(dāng)前組件狀態(tài)的  this.props 獲取到這個(gè) login 數(shù)據(jù)，
    //操作的時(shí)候  
    const {dispatch} = this.props;
    dispatch(log_out())
    //這時(shí)候就可以操作redux狀態(tài)的數(shù)據(jù)，每次數(shù)據(jù)改變都會(huì)下發(fā)給所有接收的組件

以上，我們就使用了許多東西完成了一個(gè)簡(jiǎn)單的小項(xiàng)目