引言

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

效果圖

目標功能

• [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 的版本

準備工作

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

API 數據

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

學習 Redux

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

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

后面 9、10 兩章開始運用上面學到的內容，做一個簡單的項目。

• 接著是用了 5-6 天學習網上開源項目的腳手架 —— 一個 react + redux 的完整項目 和 個人總結，基本上是看

參考所使用的庫、編譯打包的腳本以及 redux 代碼。

• 最后，大概花了 3 天看了阮一峰老師寫的 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.x3.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-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

轉載于:https://juejin.im/post/5a33800551882506cf0eee89

總結

以上是生活随笔為你收集整理的React+Redux仿Web追书神器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。