什么是 Redux?

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的伍家崗網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

Redux 是整個(gè)項(xiàng)目的狀態(tài)管理中心，數(shù)據(jù)存儲(chǔ)倉(cāng)庫(kù)，集中式的存儲(chǔ)和管理所有的組件的狀態(tài)，并且可以讓組件的狀態(tài)以一種可預(yù)測(cè)的方式變化。

什么情況下使用 Redux？

Redux 主要作為一個(gè)狀態(tài)樹的存在，主要作用可以用來(lái)集中管理共享數(shù)據(jù)，如果你想取某個(gè)數(shù)據(jù)，你就直接從狀態(tài)樹（store）上拿,你修改數(shù)據(jù)，其他頁(yè)面上從狀態(tài)樹上取到的數(shù)據(jù)也會(huì)發(fā)生改變（如果你用了 subscribe 監(jiān)聽函數(shù)或者使用了 react-redux 類似的庫(kù)幫你監(jiān)聽，則其他頁(yè)面取到的數(shù)據(jù)會(huì)自動(dòng)更新），Redux 不是必須的，它的使用場(chǎng)景是當(dāng)你覺得項(xiàng)目?jī)?nèi)的組件通信太過(guò)于繁瑣的時(shí)候使用，比如你有很多頁(yè)面，很多組件，他們之間的通信很麻煩，或者說(shuō)有些數(shù)據(jù)你需要保存起來(lái)供所有組件使用,這時(shí)候 Redux 的作用就體現(xiàn)出來(lái)了。

正如 Redux 的作者所說(shuō)：

      Flux 架構(gòu)就像眼鏡：您自會(huì)知道什么時(shí)候需要它。

核心概念

action

action 是一個(gè)對(duì)象,它包含了引起 store 狀態(tài)變化的行為，他是將數(shù)據(jù)運(yùn)輸至 store 里的唯一手段。它通常包含一個(gè) type 屬性和一個(gè)需要傳入 store 的數(shù)據(jù)，數(shù)據(jù)類型可以自定義。比如我們?cè)谧鲇脩舻卿浀臅r(shí)候經(jīng)常需要將用戶信息保存到 Redux，這時(shí)候 action 就可以是：

reducer

action 僅僅申明了我們想要改變 store 以及附帶的數(shù)據(jù)，那么我們到底怎么去改變數(shù)據(jù)呢，比如說(shuō)有一天用戶的 money 變?yōu)?000，那么傳入的 action 是：

那么這時(shí)候我們要怎么取改變 store 里面的值呢？這時(shí)候就要用到 reducer

簡(jiǎn)單來(lái)說(shuō)，reducer 就是根據(jù)傳入 actioon 類型描述如何去更改 store 中的狀態(tài)。

store

單一狀態(tài)樹

action 描述了更改數(shù)據(jù)行為的發(fā)生，reducer 描述了如何去更改數(shù)據(jù),那么我們數(shù)據(jù)還要有一個(gè)歸宿就是 store，Redux 的核心就是一個(gè) store 對(duì)象，它里面包含著我們所儲(chǔ)存的所有狀態(tài)，它類似一個(gè)物流中心，我們可以往里面存放數(shù)據(jù)，也可以從里面取出數(shù)據(jù)。它提供的方法包括:

      1、getState() 獲取當(dāng)前的的 state 狀態(tài)值

      2、dispatch(action) 派發(fā)一個(gè) action 行為更新 state

      3、subscribe(listener) 注冊(cè)一個(gè)監(jiān)聽器(當(dāng) state 跟新完了之后會(huì)自動(dòng)執(zhí)行)

這樣這三個(gè)東西就串聯(lián)在一起了。

      store.dispatch(action) 用來(lái)接收不同的 action，表明要更新 state 的 type 類型以及更新需要的數(shù)據(jù)，再通過(guò) reducer 函數(shù)計(jì)算到底怎么去更改 state，加還是減。

說(shuō)了這么多，我們最后上個(gè)例子吧：

app.js

action.js

reducer.js

store.js

PS：這是最原始的 Redux 使用方法，在實(shí)際開發(fā)中，通常還會(huì)結(jié)合 create-redux 等插件一起使用。

 -END-

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

當(dāng)前題目：前端知識(shí)|Redux的使用-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/ddjhii.html