如何看懂 redux 原理

如何看懂 redux 原理

• 我們想想怎么創(chuàng)建一個(gè) store

• 這個(gè) store 支持我們做什么

• 獲取 store 里面的數(shù)據(jù)狀態(tài)

• 可以更新 store 里面的數(shù)據(jù)狀態(tài)

• 通過什么樣的方式更新 store 里面數(shù)據(jù)狀態(tài)

• 外部如何知道數(shù)據(jù)已經(jīng)更新，通過訂閱的方式

通過以上的步驟，我們可以畫出以下的流程圖，或者原理圖：

那么我們就可以來實(shí)現(xiàn)代碼了：

import?{?createStore?}?from?'redux';

//??我們想想怎么創(chuàng)建一個(gè)?store
//?這個(gè)?store?支持我們做什么
//?1.?獲取?store?里面的數(shù)據(jù)狀態(tài)
//?2.?可以更新?store?里面的數(shù)據(jù)狀態(tài)
//?3.?通過什么樣的方式更新?store?里面數(shù)據(jù)狀態(tài)

//?store?里面?state?數(shù)據(jù)
let?state?=?{
??num:?10
}

//?需要通過什么樣的操作類型
let?action1?=?{
??type:?'ADD_ONE',
??num:?1
}

let?action2?=?{
??type:?'SQUARE',
}

let?action3?=?{
??type:?'ADD_TWO',
??num:?2
}

//?因?yàn)槲覀儫o法直接修改或者覆蓋?store?數(shù)據(jù)狀態(tài)，只能重新返回新的狀態(tài)
//?所以需要?reducer?來幫助我們做這些事情

let?reducer?=?(state?=?{num:?2},?action)?=>?{
??let?num
??switch(action.type)?{
????case?"ADD_ONE":
??????num?=?state.num?+?action.num
??????return?{?num?}
????case?"ADD_TWO":
??????num?=?state.num?+?action.num
??????return?{?num?}
????case?"SQUARE":
??????num?=?state.num?*?state.num
??????return?{?num?}
????default:
??????return?state
??}
}

//?然后使用?createStore?來連接?reducer

let?store?=?createStore(reducer)

//?外部如果獲取?store?里面的?state

console.log("store.getState",store.getState())

//?然后外部如何更新內(nèi)部的值呢
//?只能通過?dispatch?的方式更新

console.log("store.dispatch(action1)",?store.dispatch({type:?"ADD_ONE"}))

console.log("store===>",?store)

//?如果有多個(gè) reducer 怎么辦呢？
//?redux?給我們提供了?combineReducers({reducer})

那么外部 視圖層如何知道 store 里面的 state 是被更新過了呢？

redux 采用了訂閱的方式

//?那么外部是如何知道?store?里面的?state?被更新過了呢
//?redux?采用?訂閱的方式
store.subscribe(function(){
??console.log("我被更新了")
})

//?如果有多個(gè) reducer 怎么辦呢？
//?redux?給我們提供了?combineReducers({reducer})

//?如果有中間件如何處理呢
//?redux?提供了?applyMiddleware(中間件)