什么是Redux

​      Redux我們可以把它理解成一個(gè)狀態(tài)管理器，可以把狀態(tài)（數(shù)據(jù)）存在Redux中，以便增、刪、改。例如：

從服務(wù)器上取一個(gè)收藏列表，就可以把取回來的列表數(shù)據(jù)用Redux管理，多個(gè)頁面共享使用，不用把數(shù)據(jù)傳來傳去。

A頁面改變了一個(gè)狀態(tài)，B頁面要收到通知，做相應(yīng)的操作。

​       Redux是一個(gè)給JS應(yīng)用使用的可預(yù)測(cè)的狀態(tài)容器，也就是說結(jié)果是可預(yù)測(cè)的，每一次改動(dòng)會(huì)有確定的結(jié)果，正如函數(shù)式編程思想里的相同的參數(shù)會(huì)返回相同的結(jié)果。

​       Redux的狀態(tài)會(huì)存儲(chǔ)在單一的數(shù)據(jù)源中（存儲(chǔ)在對(duì)象樹中），這樣，讀取和共享就非常方便，不必去考慮會(huì)取錯(cuò)。狀態(tài)是只能直接讀取的，不能直接修改，修改只能通過發(fā)送事件（action）統(tǒng)一處理，這樣便于分析事件，也可以避免隨處修改狀態(tài)造成競(jìng)態(tài)條件。統(tǒng)一處理狀態(tài)時(shí)用純函數(shù)（reducers中的函數(shù)）來修改狀態(tài)，這些函數(shù)只是一個(gè)勾子，當(dāng)需要修改狀態(tài)樹時(shí)Redux會(huì)來調(diào)用，你可以編寫不同的函數(shù)來處理不同action對(duì)應(yīng)的狀態(tài)，或者復(fù)用一個(gè)函數(shù)來處理多種action。

為什么要用

​        簡(jiǎn)單來說就是使不易維護(hù)的數(shù)據(jù)變得維護(hù)簡(jiǎn)單，以小程序舉例：多個(gè)頁面要共享一套數(shù)據(jù)，而且這些數(shù)據(jù)是隨時(shí)可能從網(wǎng)絡(luò)上獲取更新或增減的（如頁面跳轉(zhuǎn)時(shí)要帶數(shù)據(jù)過去（非基本類型的數(shù)據(jù)），這時(shí)如果用app中的全局變量來暫存，存的變量多了，以后維護(hù)是個(gè)大麻煩，別人接手代碼也會(huì)很煩惱。），還有一個(gè)地方的數(shù)據(jù)有改變，其他地方要收到通知等這些場(chǎng)景就可以使用Redux來做，如果你沒有遇到這些問題，說明你的項(xiàng)目還沒有到這些復(fù)雜的階段，可以暫不考慮用Redux。

Redux的四個(gè)部件

Action：action是一個(gè)事件，用來描述發(fā)生了什么事，例如用戶點(diǎn)擊了一個(gè)刷新按鈕，就會(huì)產(chǎn)生一個(gè)獲取最新數(shù)據(jù)的事件，Action就是用來標(biāo)識(shí)這個(gè)事件的，Action是一個(gè)JS對(duì)象，擁有2個(gè)屬性，一個(gè)type,一個(gè)data，type用來表示該action的類型，data為新的狀態(tài)數(shù)據(jù)，既然是對(duì)象當(dāng)然還可以帶上一些其他的屬性，在處理狀態(tài)的時(shí)候使用。
Reducer：reducer是一個(gè)處理狀態(tài)的函數(shù)，真正的狀態(tài)數(shù)據(jù)處理就是在這個(gè)函數(shù)里，reducer接受兩個(gè)參數(shù)，一個(gè)是修改前的狀態(tài)（state）對(duì)象，一個(gè)是action?？梢栽趓educer中判斷action的type屬性來確定是一個(gè)什么事件然后對(duì)state做相應(yīng)的處理，并返回新的state。

Store：store是Redux的CPU，狀態(tài)處理器，它提供了一些api給我們使用，如：

getState方法，可以獲取到最新的狀態(tài)對(duì)象樹。
subscribe方法用來訂閱狀態(tài)的更新，該方法接受一個(gè)函數(shù)做為監(jiān)聽器，并會(huì)返回一個(gè)注銷訂閱的函數(shù)，以便我們?cè)诓恍枰嗛啎r(shí)注銷改監(jiān)聽器。

dispatch方法用來分發(fā)事件，它接受一個(gè)action作參數(shù)，把事件發(fā)出去。

State：state是存儲(chǔ)的數(shù)據(jù)，數(shù)據(jù)會(huì)以對(duì)象樹的結(jié)構(gòu)來管理，這里要注意，Store每次傳給reducer的state是整個(gè)state對(duì)象樹中對(duì)應(yīng)該reducer名字（key）的子對(duì)象。

​        事件發(fā)出后store會(huì)派reducer去處理事件，得到新的state，然后通知給各個(gè)監(jiān)聽器有新的變化（觀察者模式）。
總體來說Redux就像是一個(gè)快遞倉庫（store），里面的貨物（state）按地域分別存儲(chǔ)，每當(dāng)有一個(gè)新的貨物進(jìn)來（dispatch），處理程序或人員（reducer）就會(huì)去按地名（type）添加到倉庫對(duì)應(yīng)的位置，然后倉庫通知（subscribe）快遞員來取貨物。

1、先是安裝reduxJx, cnpm i --save rudux
2、創(chuàng)建一個(gè)store的js文件 
3、使用import來引用 redux   import { createStore } from 'redux'
4、然后在store 創(chuàng)建一個(gè)全局管理數(shù)據(jù)對(duì)象


const preloadState = {
  cartList: []
}
5、處理全局?jǐn)?shù)據(jù)的方法
const reducer = function(state, action){
// 參數(shù)state：上一次的state狀態(tài)
// 參數(shù)action：事件描述對(duì)象
console.log(action.type);
處理數(shù)據(jù)方法
if (item.a === 0 ){
  ...代碼
}
//返回下一次全局使用的state狀態(tài)
return state;
}
//創(chuàng)建倉庫
const store = createStore(reducer, preloadState);
export default store
6、dispatch的使用 
    在store以外 store.dispatch()調(diào)用 參數(shù)1：設(shè)置store里面的action相對(duì)的type值,參數(shù)2：傳遞的數(shù)據(jù) 
  如下:
      store.dispatch({
          type: 'add',
          value: {
            id: 2
          }
      })
然后在store里面的action里面可以獲取到 type和傳入的value值，也可以在全局管理數(shù)據(jù)中的state改變?nèi)值臄?shù)據(jù)
7、在組件（頁面）中也可以通過store. getState()來獲取你存儲(chǔ)的相對(duì)應(yīng)的值，
8、store.subscribe()的操作是基本用來監(jiān)聽 store里面的一些數(shù)據(jù)變化進(jìn)行操作的，需要主要的是dispatch的操作順序，

總結(jié)

以上所述是小編給大家介紹的redux.js詳解及基本使用，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論