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

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

react-redux的原理是什么呢？

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

0. 準備

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

redux

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

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

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

具體API如下：

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

react

react組件的更新原因可能是組件自身的state更新，組件的props更新，組件依賴的context更新導致的。但是放眼整個react應用的話，組件更新原因只有一個，就是祖先組件或者當前組件的state更新導致的。

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)用返回了一個高階組件，用高階組件包裹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，再細分有父組件傳給他的props和store的dispatch還有store的state。

小結(jié)

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

我們知道state的變化props的變化都會引起一個react組件的更新。

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

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

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

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

后面將重點閱讀connect目錄和componet目錄下代碼。

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

總結(jié)

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

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