React+Redux仿Web追書神器

時間 2019-11-24

標籤 react+redux react redux web 神器欄目 React 简体版

原文原文鏈接

引言

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

效果圖

目標功能

[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模版
.
複製代碼

項目的初始結構和說明已羅列如上。html

下面對目錄結構做如下說明react

項目最初始是參考 react-pxq 初始化的。webpack
中間件引人日誌中間件 —— redux-logger，異步 API 調用 —— redux-thunk 等;nginx
component-module 和 components 存放的都是 react 組件，區別是：容器組件就放在components中，和模塊組件(好比左側菜單組件、書籍列表組件等)就放到 component-module中;git
頁面狀態等公共部分最好是獨立起來，統一管理;github
跨域配置使用 pathRewrite 字段，須要注意 webpack-dev-server 的版本web

準備工做

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

API 數據

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

學習 Redux

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

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

後面九、10 兩章開始運用上面學到的內容，作一個簡單的項目。redux

接着是用了 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.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-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 的話要符合必定規範，一開始感受麻煩，後來看了提問的智慧，恍然大悟這部分的必要性。