• 閱讀react-redux源碼 - 零
• 閱讀react-redux源碼 - 一
• 閱讀react-redux源碼(二) - createConnect、match函數(shù)的實(shí)現(xiàn)

react的技術(shù)棧一定會(huì)遇到redux，而在react中使用redux需要使用react-redux，那么react-redux是怎么包裝redux已適用react的呢？

react-redux的原理是什么呢？

帶著這些問題，翻看了react-redux的源碼，小有收獲，寫博客以記，方便以后翻閱。

0. 準(zhǔn)備

在繼續(xù)之前先回顧一些redux、react和react-redux必要的知識(shí)。

redux

redux用于管理狀態(tài)，可以響應(yīng)狀態(tài)的變化，簡(jiǎn)單描述下：

redux的createStore函數(shù)需要一個(gè)返回state的函數(shù)作為入?yún)?#xff0c;這個(gè)函數(shù)被稱作reducer。

調(diào)用createStore就能夠得到一個(gè)store。這個(gè)store中就存儲(chǔ)著state（reducer的返回值），并且可以通過store的subscribe方法來監(jiān)聽state的變化，當(dāng)然也可以通過store提供的dispatch方法類修改state。

具體API如下：

// store.js import { createStore } from 'redux'// 3. 下面store每dispatch一次reducer就會(huì)重新執(zhí)行并計(jì)算一次state function reducer(state = {a: 1}, action) {const { type, payload } = actionreturn payload }// 0. 創(chuàng)建一個(gè)store const store = createStore(reducer)// 1. 監(jiān)聽store中state的變更 store.subscribe((state) => {console.log(state) })// 2. 發(fā)送一個(gè)action來通知reducer修改state // {type: 'type1', payload: 1} 就是一個(gè)ation store.dispatch({type: 'type1',payload: {a: 2} })

react

react組件的更新原因可能是組件自身的state更新，組件的props更新，組件依賴的context更新導(dǎo)致的。但是放眼整個(gè)react應(yīng)用的話，組件更新原因只有一個(gè)，就是祖先組件或者當(dāng)前組件的state更新導(dǎo)致的。

react-redux

// App.js import React, { Component } from 'react' import { connect } from 'react-redux'class Example extends Component {render() {return <div onClick={this.props.dispatchA}>{this.props.a}</div>} }function mapStateToProps(state) {return {...state} }function mapDispatchToProps(dispatch) {return {dispatchA() => {dispatch({type: 'type', payload: {a: 10}})}} }export default connect(mapStateToProps, mapDispatchToProps)(Example)

上面connect函數(shù)的調(diào)用返回了一個(gè)高階組件，用高階組件包裹Example組件之后就完成組件到redux的連接。

入口文件

// index.js import { Provider } from 'react-redux' import store from './store' import App from './App.js'ReactDOM.render(<Privider store={store}><App /></Provider>)

可以看出來組件Example的props來自于父組件和store，再細(xì)分有父組件傳給他的props和store的dispatch還有store的state。

小結(jié)

到這里我們有了一個(gè)redux的store，這個(gè)store會(huì)通過某些方法通知外部?jī)?nèi)部state的變化。

我們知道state的變化props的變化都會(huì)引起一個(gè)react組件的更新。

那么我們可以在store中state變化的時(shí)候通過設(shè)置組件state某個(gè)屬性來通知組件有數(shù)據(jù)更新，然后組件更新的時(shí)候從store中拿到最新的數(shù)據(jù)用于render，理論上就可以實(shí)現(xiàn)在react應(yīng)用中使用redux了。

1. 了解源碼目錄結(jié)構(gòu)

該目錄結(jié)構(gòu)是react-redux@7.2.0版本的，其中我們主要關(guān)注connect文件夾和components文件夾下內(nèi)容。connect目錄下主要實(shí)現(xiàn)了connect方法，而component目錄下則是用到的相關(guān)React組件，例如Provider和connect方法返回的高階組件。

hooks目錄則是redux的hooks用法的實(shí)現(xiàn)，utils則是用到的一些工具方法。

后面將重點(diǎn)閱讀connect目錄和componet目錄下代碼。

• 閱讀react-redux源碼 - 零
• 閱讀react-redux源碼 - 一
• 閱讀react-redux源碼(二) - createConnect、match函數(shù)的實(shí)現(xiàn)

總結(jié)

以上是生活随笔為你收集整理的阅读react-redux源码 - 零的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。