關于react-redux的一個流程圖
創(chuàng)新互聯是專業(yè)的霍邱網站建設公司，霍邱接單;提供成都網站建設、成都網站設計,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行霍邱網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!
流程圖
connect用法介紹
connect方法聲明：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
作用：連接React組件與 Redux store。
參數說明：
mapStateToProps(state, ownProps) : stateProps
這個函數允許我們將 store 中的數據作為 props 綁定到組件上。
重慶分公司
重慶分公司
const mapStateToProps = (state) => {
return {
count: state.count
}
}（1）這個函數的第一個參數就是 Redux 的 store，我們從中摘取了 count 屬性。你不必將 state 中的數據原封不動地傳入組件，可以根據 state 中的數據，動態(tài)地輸出組件需要的（最小）屬性。
（2）函數的第二個參數 ownProps，是組件自己的 props。有的時候，ownProps 也會對其產生影響。
當 state 變化，或者 ownProps 變化的時候，mapStateToProps 都會被調用，計算出一個新的 stateProps，（在與 ownProps merge 后）更新給組件。
mapDispatchToProps(dispatch, ownProps): dispatchProps
connect 的第二個參數是 mapDispatchToProps，它的功能是，將 action 作為 props 綁定到組件上，也會成為 MyComp 的 props。
[mergeProps],[options]
不管是 stateProps 還是 dispatchProps，都需要和 ownProps merge 之后才會被賦給組件。connect 的第三個參數就是用來做這件事。通常情況下，你可以不傳這個參數，connect 就會使用 Object.assign 替代該方法。
[options] (Object) 如果指定這個參數，可以定制 connector 的行為。一般不用。
原理解析
首先connect之所以會成功，是因為Provider組件：
那connect做了些什么呢？
它真正連接 Redux 和 React，它包在我們的容器組件的外一層，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，傳給一個構造函數，返回一個對象，以屬性形式傳給我們的容器組件。
關于它的源碼
connect是一個高階函數，首先傳入mapStateToProps、mapDispatchToProps，然后返回一個生產Component的函數(wrapWithConnect)，然后再將真正的Component作為參數傳入wrapWithConnect，這樣就生產出一個經過包裹的Connect組件，該組件具有如下特點:
由于connect的源碼過長，我們只看主要邏輯：
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
return function wrapWithConnect(WrappedComponent) {
class Connect extends Component {
constructor(props, context) {
// 從祖先Component處獲得store
this.store = props.store || context.store
this.stateProps = computeStateProps(this.store, props)
this.dispatchProps = computeDispatchProps(this.store, props)
this.state = { storeState: null }
// 對stateProps、dispatchProps、parentProps進行合并
this.updateState()
}
shouldComponentUpdate(nextProps, nextState) {
// 進行判斷，當數據發(fā)生改變時，Component重新渲染
if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
this.updateState(nextProps)
return true
}
}
componentDidMount() {
// 改變Component的state
this.store.subscribe(() = {
this.setState({
storeState: this.store.getState()
})
})
}
render() {
// 生成包裹組件Connect
return (
connect使用實例
這里我們寫一個關于計數器使用的實例：
Component/Counter.js
import React, {Component} from 'react'
class Counter extends Component {
render() {
//從組件的props屬性中導入四個方法和一個變量
const {increment, decrement, counter} = this.props;
//渲染組件，包括一個數字，四個按鈕
return (
Clicked: {counter} times
{' '}
{' '}
{' '}
)
}
}
export default Counter;
Container/App.js
import { connect } from 'react-redux'
import Counter from '../components/Counter'
import actions from '../actions/counter';
//將state.counter綁定到props的counter
const mapStateToProps = (state) => {
return {
counter: state.counter
}
};
//將action的所有方法綁定到props上
const mapDispatchToProps = (dispatch, ownProps) => {
return {
increment: (...args) => dispatch(actions.increment(...args)),
decrement: (...args) => dispatch(actions.decrement(...args))
}
};
//通過react-redux提供的connect方法將我們需要的state中的數據和actions中的方法綁定到props上
export default connect(mapStateToProps, mapDispatchToProps)(Counter)
完整代碼
Github：https://github.com/lipeishang/react-redux-connect-demo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯。
