React+Redux仿Web追書神器

一、元發表於2017-12-15
ReactReduxWeb

引言

由於 10 月份做的 React Native 專案沒有使用到 Redux 等庫，寫了一段時間想深入學習 React，有個想法想做個 demo 練手下，那時候其實還沒想好要做哪一個型別的，也看了些動漫的，小說閱讀，聚合資源的開源專案。由於正好在學習開源的 Android 小說閱讀器 -- 任閱，開始邊學邊做，已完成的功能列在下面。專案地址 在這裡，如果有好的意見歡迎提 issue或pr。

效果圖

React+Redux仿Web追書神器

目標功能

  • [x] 排行榜 -- 完成
  • [x] 書籍詳情 -- 完成
  • [x] 閱讀書籍 -- 完成
  • [x] 書單推薦 -- 完成
  • [x] 搜尋書籍 -- 完成
  • [x] 精選書籍 -- 完成
  • [x] 分類書籍 -- 完成
  • [x] 主題書單 -- 完成
  • [x] 書單詳情 -- 完成
  • [x] 主 頁 -- 完成

目錄結構

.
├─actions                              #redux的action,業務邏輯
├─components                           #頁面容器
│  └─common                            #公共目錄
│      ├─component-module              #封裝的元件
│      ├─images                        #專案圖片
│      │  └─icon
│      └─style                          #元件樣式
├─modules                               #公用模組
│  ├─api                                #管理api請求類
│  └─constants                          #公共欄位類
├─reducers                              #redux中的reducers，處理action傳送的資料流
├─router                                #路由管理模組
├─store                                 #redux中的store,聯結reducers
└─template                              #存放html模版
.
複製程式碼

專案的初始結構和說明已羅列如上。

下面對目錄結構作以下說明

  • 專案最初始是參考 react-pxq 初始化的。

  • 中介軟體引人日誌中介軟體 —— redux-logger，非同步 API 呼叫 —— redux-thunk 等;

  • component-module 和 components 存放的都是 react 元件，區別是：容器元件就放在components中，和模組元件(比如左側選單元件、書籍列表元件等)就放到 component-module中;

  • 頁面狀態等公共部分最好是獨立起來，統一管理;

  • 跨域配置使用 pathRewrite 欄位，需要注意 webpack-dev-server 的版本

準備工作

    1. 整理 API
    1. 學習 Redux(搭建腳手架)

API 資料

  • 資料來源主要是兩個地方：一個是開源的Android專案與RN版本的資料，另一個是追書神器h5移動端
  • 資料跨域：網上查了不少方法，考慮到便捷，使用反向代理的方式處理

學習 Redux

  • 剛開始我差不多用一個星期多學習了 Github 上的 從零開始學 ReactJS（ReactJS 101），基本上每一天看個 1-2 章，玩的也很開心，淺顯易懂，適合初學者閱讀。

前面 8 章：主要是熟悉接下來會用到的基礎概念，當然每一章講完理論，後面都會有例子自己可以動手實踐，加深對於前面概念的理解。

後面 9、10 兩章開始運用上面學到的內容，做一個簡單的專案。

參考所使用的庫、編譯打包的指令碼以及 redux 程式碼。

這部分內容是後面在搭建專案整體結構的時候看的，對於 reducers、action、store 的內容比較深入，加深理解。

技術棧

  • 雖然列了眾多核心庫，但是自己也談不上熟練運用，所以列了一些遇到的問題和後期改進的東西。

Webpack(3.10.0)

  • 本專案主要用了第三方的腳手架，學習了反向代理部分，當然自己也搭建過 webpack，後續會升級 webpack。

  • 這裡提下反向代理部分，關於使用 webpack-dev-server 進行配置反向代理的時候，如果使用 pathRewrite 到屬性需要注意 webpack-dev-server 版本，這個屬性是在 1.15.0 中，不然是不起作用的。特此說明，網上查到相同問題沒有這個解釋，以免浪費時間。

  • 升級Webpack到3.10版本並更新其他老的包，比如file-loader,css-loader等，出現的問題在下發表格中。

Webpack1.x升級到Webpack3.10
問題 1.x 3.10 備註 參考
webpack 2 cannot resolve empty extensions extensions陣列中不能出現空字元或者字串 resolve: {extensions: ['','.css']} resolve: {extensions: ['.css']} 參考1
Error: Chunk.entry was removed. Use hasRuntime() "extract-text-webpack-plugin": "^1.10.0", "extract-text-webpack-plugin": "^2.1.2", 版本問題 參考1
Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s). loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer']), ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) 新的版本只支援一個引數 npm run dev 命令執行結果錯誤提示
找不到API Schema modulesDirectories modules 屬性名稱變更 npm run dist 命令執行結果錯誤提示
找不到OccurenceOrderPlugin new webpack.optimize.OccurenceOrderPlugin(),newwebpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),new webpack.optimize.UglifyJsPlugin() new webpack.HotModuleReplacementPlugin(),new webpack.optimize.UglifyJsPlugin() 移除了OccurenceOrderPlugin 和 NoErrorsPlugin 參考1

Redux

  • 簡單的講他是一個管理單向資料流的框架，根據業務複雜度可以把控其中顆粒度。一開始學習的時候感覺反而把專案複雜化，看原理也是半懂不懂，後面不斷實踐理解前面看的內容，總歸理論要與實踐結合起來。 模型如下：簡單的資料流向可以看作 View -> Action -> (Middleware) -> Reducer
    React+Redux仿Web追書神器

React-router(2.x)

react-router(2.x)與react-router(4.x)的還是不同的，當然主要是寫法上，所以沒更新到4.0

另外， 釋出打包時使用nginx等應用伺服器託管的時候需要配置下，所用路由走index.html檔案，不然路由會被攔截。

Antd(2.13)

  • antd是（螞蟻金服體驗技術部）經過大量的專案實踐和總結，沉澱出的一箇中臺設計語言 Ant Design，使用者包括螞蟻金服、阿里巴巴、口碑、美團、滴滴等一系列知名公司，其中包括了移動端，Web端，Pro(最近剛出)

  • 遇到錯誤可以翻看 Antd的issues，基本能解決。

  • 提 Issues 的話要符合一定規範，一開始感覺麻煩，後來看了 提問的智慧，恍然大悟這部分的必要性。

擴充套件內容

功能擴充套件

  • 討論區資料統計分析，主要想知道一段時間的熱點內容。

測試及優化

  • 現在專案程式碼是沒有進行單元測試，後續學習整合JEST測試
  • 優化部分頁面的元件以及一些 bugs

相關文章