建站
咨詢
售后
建站咨詢
新聞中心
什么是Redux
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、哈爾濱ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的哈爾濱網(wǎng)站制作公司
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ù)測的狀態(tài)容器，也就是說結(jié)果是可預(yù)測的，每一次改動(dòng)會(huì)有確定的結(jié)果，正如函數(shù)式編程思想里的相同的參數(shù)會(huì)返回相同的結(jié)果。
Redux的狀態(tài)會(huì)存儲(chǔ)在單一的數(shù)據(jù)源中（存儲(chǔ)在對象樹中），這樣，讀取和共享就非常方便，不必去考慮會(huì)取錯(cuò)。狀態(tài)是只能直接讀取的，不能直接修改，修改只能通過發(fā)送事件（action）統(tǒng)一處理，這樣便于分析事件，也可以避免隨處修改狀態(tài)造成競態(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對應(yīng)的狀態(tài)，或者復(fù)用一個(gè)函數(shù)來處理多種action。
為什么要用
簡單來說就是使不易維護(hù)的數(shù)據(jù)變得維護(hù)簡單，以小程序舉例：多個(gè)頁面要共享一套數(shù)據(jù)，而且這些數(shù)據(jù)是隨時(shí)可能從網(wǎng)絡(luò)上獲取更新或增減的（如頁面跳轉(zhuǎn)時(shí)要帶數(shù)據(jù)過去（非基本類型的數(shù)據(jù)），這時(shí)如果用app中的全局變量來暫存，存的變量多了，以后維護(hù)是個(gè)大麻煩，別人接手代碼也會(huì)很煩惱。），還有一個(gè)地方的數(shù)據(jù)有改變，其他地方要收到通知等這些場景就可以使用Redux來做，如果你沒有遇到這些問題，說明你的項(xiàng)目還沒有到這些復(fù)雜的階段，可以暫不考慮用Redux。
Redux的四個(gè)部件
Action：action是一個(gè)事件，用來描述發(fā)生了什么事，例如用戶點(diǎn)擊了一個(gè)刷新按鈕，就會(huì)產(chǎn)生一個(gè)獲取最新數(shù)據(jù)的事件，Action就是用來標(biāo)識這個(gè)事件的，Action是一個(gè)JS對象，擁有2個(gè)屬性，一個(gè)type,一個(gè)data，type用來表示該action的類型，data為新的狀態(tài)數(shù)據(jù)，既然是對象當(dāng)然還可以帶上一些其他的屬性，在處理狀態(tài)的時(shí)候使用。
Reducer：reducer是一個(gè)處理狀態(tài)的函數(shù)，真正的狀態(tài)數(shù)據(jù)處理就是在這個(gè)函數(shù)里，reducer接受兩個(gè)參數(shù)，一個(gè)是修改前的狀態(tài)（state）對象，一個(gè)是action。可以在reducer中判斷action的type屬性來確定是一個(gè)什么事件然后對state做相應(yīng)的處理，并返回新的state。
Store：store是Redux的CPU，狀態(tài)處理器，它提供了一些api給我們使用，如：
getState方法，可以獲取到最新的狀態(tài)對象樹。
subscribe方法用來訂閱狀態(tài)的更新，該方法接受一個(gè)函數(shù)做為監(jiān)聽器，并會(huì)返回一個(gè)注銷訂閱的函數(shù)，以便我們在不需要訂閱時(shí)注銷改監(jiān)聽器。
dispatch方法用來分發(fā)事件，它接受一個(gè)action作參數(shù)，把事件發(fā)出去。
State：state是存儲(chǔ)的數(shù)據(jù)，數(shù)據(jù)會(huì)以對象樹的結(jié)構(gòu)來管理，這里要注意，Store每次傳給reducer的state是整個(gè)state對象樹中對應(yīng)該reducer名字（key）的子對象。
事件發(fā)出后store會(huì)派reducer去處理事件，得到新的state，然后通知給各個(gè)監(jiān)聽器有新的變化（觀察者模式）。
總體來說Redux就像是一個(gè)快遞倉庫（store），里面的貨物（state）按地域分別存儲(chǔ)，每當(dāng)有一個(gè)新的貨物進(jìn)來（dispatch），處理程序或人員（reducer）就會(huì)去按地名（type）添加到倉庫對應(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ù)對象
const preloadState = {
cartList: []
}
5、處理全局?jǐn)?shù)據(jù)的方法
const reducer = function(state, action){
// 參數(shù)state：上一次的state狀態(tài)
// 參數(shù)action：事件描述對象
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相對的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ǔ)的相對應(yīng)的值，
8、store.subscribe()的操作是基本用來監(jiān)聽 store里面的一些數(shù)據(jù)變化進(jìn)行操作的，需要主要的是dispatch的操作順序，總結(jié)
以上所述是小編給大家介紹的redux.js詳解及基本使用，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
文章題目：redux.js詳解及基本使用
轉(zhuǎn)載來于：http://fisionsoft.com.cn/article/gcijoh.html
