資訊專欄INFORMATION COLUMN
摘要：應(yīng)用中唯一的狀態(tài)應(yīng)用的子組件例子方法來看下函數(shù)到底是如何將和組件聯(lián)系在一起的，注意到文檔中有這樣的一句話并不會(huì)改變它連接的組件，而是提供一個(gè)經(jīng)過包裹的組件。
關(guān)于React-redux
Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問：該如何通俗易懂的理解Redux?
Redux是JavaScript的狀態(tài)容器，Redux的概念簡單明了：
1. 應(yīng)用中所有的狀態(tài)都是以一個(gè)對(duì)象樹的形式存儲(chǔ)在一個(gè)單一的store中；
2. 當(dāng)你想要改變應(yīng)用的中的狀態(tài)時(shí)，你就要dispatch一個(gè)action,這也是唯一的改變state的方法；
3. 通過編寫reducer來維護(hù)狀態(tài)，返回新的state,不直接修改原來數(shù)據(jù)；
在React中，數(shù)據(jù)的傳遞主要采用state和props，props得由父級(jí)分發(fā)下來，而state是組件中可自行管理的狀態(tài)，這意味著React并沒有讓數(shù)據(jù)回溯的能力，數(shù)據(jù)只能單向向下分發(fā)，或者自行內(nèi)部處理，舉一個(gè)簡單的例子，父組件可以使用props向子組件傳遞數(shù)據(jù)，子組件可以通過觸發(fā)回調(diào)函數(shù)來改變父組件的狀態(tài)，如果是那種沒有嵌套關(guān)系的組件，該如何來實(shí)現(xiàn)通信呢？為了解決這個(gè)問題,Redux的方法就是將store放在根目錄頂層組件中，一層層往下分發(fā)給各子組件,在子組件中進(jìn)行調(diào)用，Redux的作用是讓狀態(tài)變得更加可預(yù)測、并且更容易管理。
Redux由Flux框架演變而來，但在Flux的基礎(chǔ)上Redux改變了整個(gè)框架中某些角色的作用，例如在Flux中你可以擁有多個(gè)store，每個(gè)store存儲(chǔ)自己對(duì)應(yīng)的那部分狀態(tài),在Redux中，你只能維護(hù)一個(gè)store,存儲(chǔ)了整個(gè)應(yīng)用的所有狀態(tài)，Redux更傾向于把store分發(fā)下去，dispatch action的時(shí)候，reducer根據(jù)狀態(tài)對(duì)象的key值再將store進(jìn)行拆分，reducer能拿到store中對(duì)應(yīng)的那一部分進(jìn)行處理，Redux提供createStore、combineReducers、applyMiddleware等一系列方法來配合React-redux使用幫我們更好的對(duì)這個(gè)store進(jìn)行管理，這里要詳講的是React-redux中的connect方法。
Store與視圖層的綁定 Provider組件想要把store綁定在視圖層上，得用到React-redux中的兩個(gè)主角:Provider和Connect，在api文檔第一段話,作者說通常情況下你無法使用connect()去connect一個(gè)沒有繼承Provider的組件，也就是說如果你想在某個(gè)子組件中使用Redux維護(hù)的store數(shù)據(jù)，它必須是包裹在Provider中并且被connect過的組件，Provider的作用類似于提供一個(gè)大容器，將組件和Redux進(jìn)行關(guān)聯(lián)，在這個(gè)基礎(chǔ)上，connect再進(jìn)行store的傳遞。
Provider組件源碼：
export function createProvider(storeKey = "store", subKey) {
......
class Provider extends Component {
getChildContext() {
return { [storeKey]: this[storeKey], [subscriptionKey]: null }
}
constructor(props, context) {
super(props, context)
this[storeKey] = props.store;
}
render() {
return Children.only(this.props.children)
}
}
}
從源碼中可以看到，作者用了React的Context,Context解決了一個(gè)React中很常見的問題：當(dāng)你的組件嵌套越來越深的時(shí)候，context能讓你父組件和其它里層組件之間的通信變的更方便，createProvider方法將返回一個(gè)Provider組件，該組件接受store和子組件，在Provider中定義了getChildContext方法來傳遞store，那么在子組件中利用contextTypes，你就能利用context訪問到父級(jí)組件傳遞的store數(shù)據(jù)了。
Props
store:應(yīng)用中唯一的狀態(tài)store
children: 應(yīng)用的子組件
例子：
connect方法
來看下connect函數(shù)到底是如何將store和組件聯(lián)系在一起的，注意到api文檔中有這樣的一句話:
It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.
connenct并不會(huì)改變它“連接”的組件，而是提供一個(gè)經(jīng)過包裹的connect組件。 conenct接受4個(gè)參數(shù)，分別是mapStateToProps，mapDispatchToProps，mergeProps，options(使用時(shí)注意參數(shù)位置順序)。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps(state, ownProps) 方法允許我們將store中的數(shù)據(jù)作為props綁定到組件中，只要store更新了就會(huì)調(diào)用mapStateToProps方法，mapStateToProps返回的結(jié)果必須是object對(duì)象，該對(duì)象中的值將會(huì)更新到組件中，例子：
const mapStateToProps = (state) => {
return ({
count: state.counter.count
})
}
mapDispatchToProps(dispatch, [ownProps]) 第二個(gè)參數(shù)允許我們將action作為props綁定到組件中，mapDispatchToProps希望你返回包含對(duì)應(yīng)action的object對(duì)象，例如：
const mapDispatchToProps = (dispatch, ownProps) => {
return {
increase: (...args) => dispatch(actions.increase(...args)),
decrease: (...args) => dispatch(actions.decrease(...args))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(yourComponent)
當(dāng)你想對(duì)組件的render更新進(jìn)行更好的控制的時(shí)候，它也支持返回function方法，具體可以點(diǎn)擊#279查看，例子：
const mapDispatchToProps = {
// increment: () => increment(1),
increase, // import increase function from action
decrease
}
mergeProps(stateProps, dispatchProps, ownProps) 該參數(shù)非必須，redux默認(rèn)會(huì)幫你把更新維護(hù)一個(gè)新的props對(duì)象，類似調(diào)用Object.assign({}, ownProps, stateProps, dispatchProps)。
而options是為了更好的定制化設(shè)置的一個(gè)參數(shù)，允許返回5個(gè)boolean、function的值，我平時(shí)基本上沒有接觸到，想了解的可以參考api文檔。
附參考文檔：Redux中文文檔
Redux api介紹
(自己平時(shí)寫的一些總結(jié)，有誤的地方歡迎交流指正)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84473.html
摘要：和的結(jié)合簡述相信很多前端開發(fā)者都聽說或使用過，我曾寫過一篇關(guān)于快速理解的文章，雖說是快速理解，但實(shí)際上更應(yīng)該叫做復(fù)習(xí)吧。它通過高階函數(shù)，純函數(shù)使我們?cè)诰帉懡M件時(shí)完全不用接觸相關(guān)內(nèi)容，只通過將組件和數(shù)據(jù)連接起來即可。 react-redux react和redux的結(jié)合 簡述 相信很多前端開發(fā)者都聽說或使用過react-redux，我曾寫過一篇關(guān)于快速理解redux的文章，雖說是快...
摘要：更新類型及具體內(nèi)容負(fù)責(zé)更新數(shù)據(jù)的具體邏輯。即根據(jù)當(dāng)前及攜帶的信息合成新的數(shù)據(jù)。下面帶著這些問題深入了解本質(zhì)上也是高階組件的一種實(shí)現(xiàn)。核心實(shí)現(xiàn)聲明以被子組件獲取。通過的實(shí)現(xiàn)，我們可以得到的重要性淺比較的實(shí)現(xiàn)由此可以看到的重要性。前言 Redux作為通用的狀態(tài)管理器，可以搭配任意界面框架。所以并搭配react使用的話就要借助redux官方提供的React綁定庫react-redux，以高效靈活的...
摘要：使得在變化和異步中可預(yù)測。它是數(shù)據(jù)的唯一來源。指定了應(yīng)用狀態(tài)的變化如何響應(yīng)并發(fā)送到的，只是描述了有事情發(fā)生了這一事實(shí)，并沒有描述應(yīng)用如何更新。更新的函數(shù)稱為，它是一個(gè)純函數(shù)，接受舊的和，返回新的。是和之間的橋梁，是把它們聯(lián)系到一起的對(duì)象。 為什么使用redux 隨著前端單頁面開發(fā)越來越復(fù)雜，javascript需要管理越來越多的狀態(tài)state。如果一個(gè)model的變化引起另一個(gè)mode...
摘要：手挽手帶你學(xué)入門四檔用人話教你，理解架構(gòu)，以及運(yùn)用在中。學(xué)完這一章，你就可以開始自己的項(xiàng)目了。結(jié)合搭建基礎(chǔ)環(huán)境我們上一章講過了的原理，內(nèi)部是有一個(gè)的，只有才可以控制它變化。 手挽手帶你學(xué)React入門四檔,用人話教你react-redux，理解redux架構(gòu)，以及運(yùn)用在react中。學(xué)完這一章，你就可以開始自己的react項(xiàng)目了。 視頻教程 上一篇我們自己實(shí)現(xiàn)了Redux，這一篇我們來...
簡介：簡單實(shí)現(xiàn)react-redux基礎(chǔ)api react-redux api回顧 把store放在context里，所有子組件可以直接拿到store數(shù)據(jù) 使組件層級(jí)中的 connect() 方法都能夠獲得 Redux store 根組件應(yīng)該嵌套在 中 ReactDOM.render( , rootEl ) ReactDOM.render( ...
閱讀 3295·2021-11-25 09:43
閱讀 2097·2021-09-22 10:02
閱讀 3356·2021-09-06 15:00
閱讀 2308·2019-08-30 15:56
閱讀 2361·2019-08-30 15:54
閱讀 3238·2019-08-30 14:14
閱讀 2271·2019-08-29 17:25
閱讀 2914·2019-08-29 17:16
