在React中如何使用Redux-創(chuàng)新互聯(lián)

這篇文章主要介紹在React中如何使用Redux，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)鄂托克前免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

修復(fù)遺留問(wèn)題

1. webpack.prod.config.js中缺少了對(duì)path庫(kù)的引用，執(zhí)行構(gòu)建npm run build:prod的時(shí)候失敗。在文件開始的地方引入node.js的path庫(kù)就可以了。

2. package.json里面定義了一個(gè)build:dev的腳本，這個(gè)腳本其實(shí)有點(diǎn)多余，不過(guò)有時(shí)候需要打包測(cè)試版本的文件，所以還是需要存在。主要有個(gè)問(wèn)題是webpack.dev.config.js中output節(jié)點(diǎn)下錯(cuò)誤定義了path的值為根目錄'/'，這在使用npm start命令啟動(dòng)運(yùn)行時(shí)打包的時(shí)候看不出問(wèn)題，但是在使用npm run build:dev時(shí)會(huì)出現(xiàn)無(wú)法寫文件到根目錄的權(quán)限錯(cuò)誤。只要把path的值改掉就可以。path: config.publicPath改成path: config.staticPath,publicPath: config.publicPath。

3. css-loader和less-loader導(dǎo)出的樣式類名太長(zhǎng)，還是把localIdentName中的path部分去掉比較好看。

redux

安裝redux

安裝依賴的命令如下：

npm install --save redux react-redux redux-thunk  
npm install --save-dev redux-logger

redux不用說(shuō)了，我是把它當(dāng)成一個(gè)本地?cái)?shù)據(jù)庫(kù)使用，react-redux幫助你完成數(shù)據(jù)訂閱，redux-thunk可以放你實(shí)現(xiàn)異步action，redux-logger是redux的日志中間件。

關(guān)于redux與代碼布局

在開始介紹之前我想先就redux的使用發(fā)表一些自己的看法：

前文說(shuō)了我把redux當(dāng)成一個(gè)本地?cái)?shù)據(jù)庫(kù)，因此我傾向于把redux封裝類似于mvc中的Model的角色，獨(dú)立為一層。這與另一種觀點(diǎn)——我在公司的項(xiàng)目更傾向于把每個(gè)頁(yè)面當(dāng)成一個(gè)獨(dú)立模塊，每個(gè)模塊維護(hù)自己的reducer和action的觀點(diǎn)，有所出入。

我的做法可以更好地實(shí)現(xiàn)reducer的復(fù)用。而對(duì)我自己來(lái)說(shuō)更重要的好處是集中修改。更適合小項(xiàng)目或者獨(dú)自開發(fā)一個(gè)項(xiàng)目的場(chǎng)景。

我公司的項(xiàng)目的做法對(duì)多人協(xié)同開發(fā)更有利，畢竟每個(gè)人維護(hù)好自己的代碼就可以了。公司項(xiàng)目的這種方法有幾個(gè)問(wèn)題讓我比較難以接受：

第一個(gè)是模塊越多reducer和action的定義越多，很多時(shí)候這些代碼都是差不多的。

更重要的是第二個(gè)問(wèn)題：模塊數(shù)據(jù)在store里面的存儲(chǔ)是直接在根state下面排列下來(lái)的，根state的數(shù)據(jù)格式樣式有點(diǎn)像這樣：

{
    aModuleData:{...},
    bModuleData:{...},
    cModuleData:{...},
    dModuleData:{...},
    ...
}

項(xiàng)目的原意是希望每個(gè)模塊的保持獨(dú)立，但實(shí)際上使用的時(shí)候卻是有極大的可能出現(xiàn)aModule同時(shí)使用aModuleData和bModuleData的情況。這跟每個(gè)人維護(hù)自己的代碼的初衷有悖，也沒(méi)有發(fā)揮好redux的真正能力。

還有一個(gè)小問(wèn)題是reducer的組織通常影響著應(yīng)用數(shù)據(jù)state的樣式，把reducer分散到每個(gè)模塊之后，state的形式在代碼上很難直管地反映出來(lái)，特別是當(dāng)模塊是動(dòng)態(tài)加載的時(shí)候更甚。不過(guò)借助logger等工具可以解決。

關(guān)于這塊的爭(zhēng)議Redux的教程中有提及。

使用redux

無(wú)論代碼怎么布局，使用redux的方法主要還是三步曲：創(chuàng)建store、創(chuàng)建action、創(chuàng)建reducer。而在這之后才是與業(yè)務(wù)或者組件相關(guān)的數(shù)據(jù)處理和展示。

先看一下我的做法的代碼布局：

創(chuàng)建store的代碼集中在model/index.js中，model/actions/.js和model/reducer/.js里面分別是寫action創(chuàng)建函數(shù)和reducer函數(shù)的地方，根據(jù)模塊可以自己DIY。

model/index.js的代碼如下：

model/actions/index.js的代碼如下：

這里定義了一個(gè)名叫l(wèi)ogin的異步actionCreator以及三個(gè)普通的actionCreator。

actionCreator被某個(gè)組件調(diào)用后會(huì)向store發(fā)送action，然后被reducer處理，reducer定義在model/reducers/index.js中，代碼如下：

這就完成了三步曲了。上面的代碼簡(jiǎn)單地模擬了登錄的動(dòng)作。登錄頁(yè)面用到的數(shù)據(jù)存放在loginPageData中，登陸后獲取到的當(dāng)前登錄用戶數(shù)據(jù)存儲(chǔ)在實(shí)體數(shù)據(jù)entities中。

接下來(lái)要把redux和react聯(lián)系起來(lái)，也就是把redux的store中的數(shù)據(jù)交給react的組件使用。

第一步需要掛載redux的store到react，為react提供數(shù)據(jù)支持。最簡(jiǎn)單的做法是找到應(yīng)用的根組件（我這里是BasicExample.js），然后在它的render函數(shù)中最外層添加Providor標(biāo)簽。代碼片段如下：

紅線部分畫出了改動(dòng)點(diǎn)，從model/index.js中導(dǎo)出了store對(duì)象，通過(guò)react-redux提供的Providor標(biāo)簽掛載到react中，為react提供數(shù)據(jù)支持。

看最后的紅線中，我們?cè)贖ome組件里面添加了這次的測(cè)試?yán)覴eduxDemo。它的代碼如下：

代碼的重點(diǎn)在connect函數(shù)。這個(gè)函數(shù)也是由react-redux提供的。使用它可以包裝普通的展示組件（這里是ReduxDemo——只負(fù)責(zé)展示數(shù)據(jù)），然后返回一個(gè)容器組件。connect函數(shù)通過(guò)第一個(gè)參數(shù)讓展示組件訂閱了來(lái)自store的數(shù)據(jù)；通過(guò)第二個(gè)參數(shù)讓展示組件默認(rèn)可以dispatch各種action。

這個(gè)例子在ReduxDemo掛載完成后調(diào)用login接口模擬登陸。返回結(jié)果被塞到store中（數(shù)據(jù)格式由先前寫好的reducers的組織方式?jīng)Q定）。頁(yè)面根據(jù)store中的數(shù)據(jù)展示內(nèi)容。由于login發(fā)出的遠(yuǎn)程請(qǐng)求是假的，所以這里總是失敗，因此會(huì)顯示失敗的內(nèi)容。

關(guān)于redux的使用介紹到此結(jié)束。

redux輔助庫(kù)

其實(shí)在上面的代碼中我已經(jīng)悄悄地提及了兩個(gè)輔助庫(kù)，也是我想在這里推薦的兩個(gè)庫(kù)：

1. 開發(fā)工具redux-devtools：結(jié)合各種其他庫(kù)可以實(shí)現(xiàn)可視化的調(diào)試界面。

2. 數(shù)據(jù)規(guī)范化工具normalizr：規(guī)范化組織數(shù)據(jù)。經(jīng)過(guò)三個(gè)項(xiàng)目的體驗(yàn)后，個(gè)人非常推薦使用這個(gè)庫(kù)，可以讓應(yīng)用的數(shù)據(jù)組織更清晰、減少冗余數(shù)據(jù)、減少因數(shù)據(jù)刷新導(dǎo)致的性能影響。

以上是“在React中如何使用Redux”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：在React中如何使用Redux-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://bm7419.com/article4/dihpie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、微信小程序、全網(wǎng)營(yíng)銷推廣、Google、App開發(fā)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)