之前寫過一篇文章，分享了我利用閑暇時間，使用React+Redux技術棧重構的百度某產品個人中心頁面。您可以參考這里，或者參考Github代碼倉庫地址。
這個工程實例中，我采用了廠內的工程構建工具－FIS3，并貫穿了react+redux基本思想。

今天這篇文章給大家分享一個更加復雜，但是非常有趣的一個項目－
News Early單頁應用。

最近我發現，React Redux生態圈項目活躍。但是作品質量“良莠不齊”，很多非常熱門的項目不僅沒有起到“布道”作用，而且在一定程度上“誤導”了讀者。在這篇文章里面我會有詳細說明。當然，我自己也是資歷淺顯，水平有限。希望大神能夠給與斧正。

我把這個項目所有代碼托管在了我個人Github之中，感興趣的讀者可以跟我探討。

同時通過這個項目實例和這篇文章，一步一步說明了這個項目開發細節，并且包括了優化手段等內容。希望使大家對于React技術棧，包括：React UI框架 ＋ Redux數據流框架＋React Router路由管理＋Webpack構建工具等，有一個更加清晰深刻的理解。

項目背景

在國外上學和工作期間，能暢通無阻的訪問諸如：BBC，CNN，ESPN，Le Figaro等新聞媒體是一大便利，也是我個人閑暇時期一個喜好之一。
甚至外出旅游時，在酒店收看這些媒體衛視（尤其CNN）竟然也是放松休閑的一大方式。。。

當然，國內環境對于這些境外媒體顯然不是太友好。
基于此，我設計開發了News Early項目。

這個項目是一個包括：BBC，CNN，The NewYork Times等70多個國際知名媒體的即時頭條新聞聚合APP。

News Early is a simple and easy-to-use Web APP that gathers the headlines currently published on a range of news sources and blogs (70 and counting so far).

整個項目我使用了包括但不限于以下技術棧和構建工具：
1）React UI框架from Facebook；
2）JSX模版；
3）Redux數據流設計；
4）Webpack構建工具；
5）Less預處理器；
......

項目設計

整個Web APP的部分使用體驗，我用以下GIF圖示來呈現：
（請耐心等待GIF圖加載）

APP 使用截圖

• 頁面頂部導航條
  包括：側欄菜單開啟按鈕和右側的刷新頁面按鈕。
• 頁面內容頭部輪播圖
  支持自動播放和手勢滑動操控。
• 頁面主體部分
  主體部分是所對應的新聞頻道的headlines頭條新聞，一般有10-20個items左右。每一個item包含一張新聞圖片，新聞導讀（Abstract）以及新聞發布時間（publish time）。
• 左側折疊菜單欄
  功能用于新聞頻道的篩選。
  以Gif圖截取為止，一共接入了：BBC News，BBC Sport，CNN，ESPN，Financial Times，USA Today，MTV News7家國際媒體。

因為我不是搞視覺設計的，也不是做頁面交互設計的（好吧，我只是一枚碼農）。所以為了節省時間，整體APP的樣式上，包括界面顏色等，我參考了賣座網的實現。

項目架構和落地

下面，我為大家介紹一下整個項目的設計構成和開發細節。

數據流狀態演示

熟悉Redux數據流框架的同學，應該對于store，dispatch，action，reducer，以及中間件等概念比較熟悉。這里不再進行講解。
這套架構中，最重要的就是數據流的設計。

首先，我們先整體看一下在“切換頻道”這個交互發生時，整個項目的數據流向和數據結構的演示：

數據流動示意圖

目錄結構

如圖所示：

目錄結構

整個項目業務代碼部分，我拆分成9個UI組件，1個全局Store，一個actions定義文件。

• app是開發目錄
  • actions目錄集中了全局所有的actions
  • components目錄集中了全局用到的所有UI組件
  • reducers目錄集中了Redux架構中的所有reducers
  • store目錄定義全局唯一的store
  • style目錄集中了全局所有組件的樣式文件
  • main.js為全局的入口函數
• build是打包后結果目錄
  • index.html是輸出頁面文件
  • bundle.js開發目錄下腳本文件打包后的產出
  • img文件定義了APP開啟時的loading圖片
• node_modules相信大家不會陌生，這是依賴文件
  ...
  其他配置文件不再一一介紹。

10個組件包括：

• appIndex: 組件容器
• billboardCarousel: 頁面輪播圖組件
• currentChanel: 頁面headlines新聞頭條組件
• homeView: 主體頁面
• imagePlaceholder: 占位圖組件
• loading: 加載提示組件
• navBar :頂部導航組件
• sideBar: 側邊欄組件
• routerWrap: 路由相關組件

骨架構建

我認為，redux之所以學習曲線陡，很大程度上就在于數據流的貫通上。

“組件觸發(dispatch)各種action，單向數據流流向reducer，reducer是一個純函數(函數式編程思想)，接收處理action，返回新的數據，組件進而更新”

這一套理論并不難理解。

但是落實在工程上，尤其要結合react，那就不好做了。即使有人做出來，業務就算可以跑得通，但是相比核心思想，卻是背道而馳。社區上我看過很多項目，在寫法上不分青紅皂白，只要能運行，胡亂設計一通，誤導初學者。

比如在整個項目中，存在多個stores這種常見的問題。

那么，為什么不建議存在多個store呢？
答案可以在官方FAQ中找到。內容較多，如果英文閱讀吃力，我大體翻譯一下：
熟悉Flux原始模型的讀者可能了解，Flux存在多個stores，每個store都維護了不同層次的數據。這樣設計的問題在于，一個store需要等待另外一個store的操作處理。我們Redux實現了切分數據層次，避免了這種情況的發生。
僅維持單個store不僅可以使用Redux DevTools，還能簡化數據的持久化及深加工、精簡訂閱的邏輯處理。
單一store這種方式，我們不用考慮store模塊的導入、 Redux應用的封裝，后期支持服務器渲染也將變得更為簡便。

如果上邊這段話過于抽象，難以理解的話，那就直接看我的代碼實現吧。

定義全局唯一的store：

const store = createStore(
    combineReducers({
        sideBarChange,
        contents,
        routing: routerReducer
    }),
    composeEnhancers(applyMiddleware(thunkMiddleware)),
);

其中，我使用了redux-thunk作為中間件，用于處理異步action。這樣，把異步過程放在action級別解決，對component沒有影響。
另外composeEnhancers是用于使用redux devtool的設置。

容器組件構建：

const mapStateToProps = (state) => {
    return {
        showLeftNav: state.sideBarChange.showLeftNav,
        loading: state.contents.loading,
        contents: state.contents.contents,
        currentChanel: state.contents.currentChanel
    }
}

var App = connect(mapStateToProps)(AppIndex);
render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <Route path="home" component={HomeView}/>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('app')
);

其中，我使用了react-redux進行連接。AppIndex是整個項目唯一的容器組件。進行action的dispatch，以及向下傳遞props給UI組件（木偶組件）。

如果你還不理解容器組件和UI組件的區別，可以去官方文檔學習。這兩個概念極其重要，它直接決定你是否能設計出有效且合理的組件架構。

另外，你會發現我使用了react－router進行路由管理。其實整個項目沒有必要使用單頁路由。這個路由管理的引入，說實話，比較雞肋。但并不會對項目產生任何影響。我引入他的原因主要有兩點。

• 第一是，后續進行二次開發，考慮到更多的產品迭代的話，使用路由管理是必須的，我們要為長遠準備。
• 另一個原因就是，我從來沒用用過，好吧，想嘗鮮下。

actions設計

actions當然是必不可少的，我這里選取最重要的“fetchContents”這個action creator來討論一下。

初次進入頁面時，以及左側邊欄點擊選擇新聞頻道時，都要去拉取數據。比如，APP第一次渲染，默認加載“BBC News”新聞頻道，頁面主體組件在掛載完成后：

componentDidMount() {
    //獲取內容
    this.props.fetchContents('bbc-news');
}

向上調用fetchContents方法，并逐級上傳到容器組件。由容器組件進行dispatch:

fetchContents={(source)=>{this.props.dispatch(action.fetchContents(source))}}

source表示拉取的新聞頻道。此處當然是'bbc-news'。

在actions.js文件中，進行異步action的處理并拉取數據。這里，我使用了最新的fetch API來代替古老的XHR，并利用fetch的promise的理念，封裝了一層_get方法，用于AJAX異步請求：

const sendByGet = ({url}, dispatch) => {
let finalUrl = url + '&apiKey=1a445a0861e'
return fetch(finalUrl)
        .then(res => {
            if (res.status >= 200 && res.status < 300) {
                return res.json();
            }
            return Promise.reject(new Error(res.status));
        })
}

對應的action操作：

export const fetchContents = (source) => {
    const url = '...';
    return (dispatch) => {
        dispatch({type: FETCH_CONTENTS_START});
        if (sessionStorage.getItem(source)) {
            console.log('get from sessionStorage');
            let articles = JSON.parse(sessionStorage.getItem(source));
            dispatch({type: FETCH_CONTENTS_SUCCESS, contents: Object.assign(articles, {currentChanel: source.toUpperCase()})})
        }
        else {
            sendByGet({url}, dispatch)
            .then((json) => {
                if (json.status === 'ok') {
                    sessionStorage.setItem(source, JSON.stringify(json.articles)); 
                    return dispatch({type: FETCH_CONTENTS_SUCCESS, contents: Object.assign(json.articles, {currentChanel: source.toUpperCase()})})
                }
                return Promise.reject(new Error('FETCH_CONTENTS_SUCCESS failure'));
            })
            .catch((error) => {
                return Promise.reject(error)
            })
        }
    }
}

請求優化

我們知道，這些異步請求的訪問速度是很慢的。因此，我采用了幾種方法來進行優化。

• 第一個方法就是加載時的loading美化。
  我使用了來自網絡的圖片占位。
  當我把控制臺中網絡環境人為的模擬為3G時，頁面效果如下：
  （請耐心等待GIF圖加載）

加載占為圖

原諒我使用了這么粉嫩少女的加載圖。。。

• 第二個方法其實是一個trick，我的全局圖片在初始狀態時opacity設置為0，在onload事件觸發時設置一個fadeIn的效果：

  <img ref="image" src={imgSrc} onLoad=
  {this.handleImageLoaded.bind(this)}/>
  
  handleImageLoaded() {
      this.refs['image'].style.opacity = 1;
  }
  

這樣的一個小技巧最初來自Facebook對用戶體驗的研究。如果您對此有興趣，可以在我的另外一篇文章中找到相關內容。

• Web Storage來進行優化
  因為各大新聞媒體的headlines發布更新是不定時的，這個時間間隔可能較長。而我考慮到用戶使用這個Web APP一般都是在碎片時間中。因此我采用了sessionStorage進行緩存內容。不要問我為什么不使用localStorage...，如果你存在疑問，建議對于Web Storage的特性再去回爐重修一下。

具體實現方式就是在發送請求時判斷sessionStorage是否已經存在此新聞媒體（比如bbc）的數據。如果存在就使用緩存。否則就去進行AJAX請求，請求成功的回調函數里進行緩存的種植。
代碼部分如下：

if (sessionStorage.getItem(source)) {
    console.log('get from sessionStorage');
    let articles = JSON.parse(sessionStorage.getItem(source));
    dispatch({type: FETCH_CONTENTS_SUCCESS, contents: Object.assign(articles, {currentChanel: source.toUpperCase()})})
}
else {
    sendByGet({url}, dispatch)
    .then((json) => {
        if (json.status === 'ok') {
            sessionStorage.setItem(source, JSON.stringify(json.articles)); 
            return dispatch({type: FETCH_CONTENTS_SUCCESS, contents: Object.assign(json.articles, {currentChanel: source.toUpperCase()})})
        }
        return Promise.reject(new Error('FETCH_CONTENTS_SUCCESS failure'));
    })
    .catch((error) => {
        return Promise.reject(error)
    })
}

當然，有種植緩存，就要有清除緩存。這個按鈕我設置在里navBar組件的最右側：

const CLEAR_SESSIONSTORAGE = 'CLEAR_SESSIONSTORAGE';
export const refresh = () => {
    sessionStorage.clear();
    return dispatch => dispatch({type: CLEAR_SESSIONSTORAGE});
}

其他細節

為了使用先進的構建工具的需求，我使用了node最新版本。但是因為工作業務的需要，又要同時保留低版本node環境。為此，我使用了：n這個利器進行node版本管理。

同時，我使用了webPack一系列強大開發功能和構建功能。包括但不限于：

• 熱更新
• Less編譯插件
• 服務器構建，使用了8088端口
• jsx,es6編譯
• 打包發布
• 彩色日志

...等等，但是我可不是webpack專家。在狼廠，當然使用更多的是FIS構建工具。關于FIS和webpack的比較，我的網紅同事@顏大神有過探索。

總結

這篇文章涉及到了較為前沿的前端開發技術棧。包括了React框架，Redux數據流框架以及函數式編程、異步action中間件，fetch異步請求，webpack配置等等。也無形中涉及到了一些成熟產品的設計理念思路。當然這個項目還遠沒有成熟。在代碼倉庫中，我會不間斷進行更新。
希望本文對大家在各個維度都有所啟發。也懇請業界大牛不吝賜教，進行斧正。

最后想跟大家談一下對于框架和前端學習的一些感受。我記得我剛開始工作，在初次接觸前端時，是使用ionic，即Angular框架和phoneGap開發hybrid移動APP。當時我是完全懵b的，只是感覺比利時同事用的超high，6到飛起。每次他用濃重的比利時口音法語給我講解時，我聽的云里霧里，不知所以。

現在想想當時那么菜的原因還是在于自己的JS基礎不夠牢固。當你面對迅速更新換代的前端技術踟躕茫然時，唯一的捷徑就是從基礎抓起，從JS原型原型鏈，this，執行環境上下文等等看起。

覺得前端知識有欠缺的讀者們，歡迎follow我。最近我會帶大家“重讀”JS經典書籍，以code demo的形式提煉知識點，并會同步到博客和個人Github上。

Happying code!