Provider組件

Provider用于建立能夠被子組件訪問的全局屬性，核心API有兩個：

• childContextTypes靜態屬性，用于指定被子組件訪問的全局屬性類型
• getChildContext方法，用于指定可以被子組件訪問的全局屬性

Provider簡版源碼實現：

import React from 'react'; import PropTypes from 'prop-types';export default class Provider extends React.Component{//指定子組件可以訪問的屬性類型static childContextTypes = {store: PropTypes.object}constructor(props){super(props);}//指定子組件可以訪問的屬性getChildContext(){return{store: this.props.store}}render() {//用其包含的子組件進行視圖渲染return this.props.children;} }

然后，在引用到全局屬性的子組件當中指定contextTypes進行指定的全局屬性獲取，同時需要在子組件的構造函數中聲明context，否則context是一個空對象

static contextTypes = {store: PropTypes.object }constructor(props,context){super(props,context); }

最后，把Provider組件作為根組件，傳入相應相對應的全局屬性即可：

<Provider store={store}><App></App> </Provider>

connect函數

connect函數其實是一個代理模式的高階組件，對目標組件進行增強或減弱形成一個新的組件，然后返回這個新的組件。

connect函數有兩個參數，分別是mapStateToProps和mapDispatchToProps。

mapStateToProps

mapStateToProps是一個匿名函數，用于指定傳遞到組件當中的props，實現方式也簡單，直接執行其匿名函數即可：

const stateProps = mapStateToProps(store.getState());

最后，把stateProps展開傳進目標組件即可

mapDispatchToProps

mapDispatchToProps既可以是對象，也可以是函數，它主要是用于action和傳進來的props進行關聯，利用bindActionCreators函數對action進行了dispatch的封裝，使action變成dispatch(action)，形成派發指定的action對指定的props進行調用。

const dispatchProps = bindActionCreators(mapDispatchToProps,store.dispatch);//把action封裝成dispatch(action) function bindActionCreators(actionCreators,dispatch) {return Object.keys(actionCreators).reduce((result,item) => {result[item] = (...args) => dispatch(actionCreators[item](...args));return result;},{}) }

最后，把dispatchProps展開傳進目標組件即可

connect函數的完整實現

import React from 'react'; import PropTypes from 'prop-types'; import {bindActionCreators} from './mini-redux';export const connect = (mapStateToProps = state => state, mapDispatchToProps={}) => (WrapComponent) => {class ConnectComponent extends React.Component{//指定要訪問的全局屬性，若contextTypes沒有定義，context將是一個空對象static contextTypes = {store: PropTypes.object}constructor(props,context){super(props,context);this.state = {props: {}}this.update = this.update.bind(this);}componentDidMount(){const {store} = this.context;store.subscribe(this.update);//訂閱store里的狀態，發生變化就調用update函數this.update();}componentWillUnmount(){const {store} = this.context;store.unsubscribe(this.update);//移除監聽stor狀態變化的函數}//獲取mapStateToProps和mapDispatchToProps，放進this.state.props中更新組件update(){const {store} = this.context;const stateProps = mapStateToProps(store.getState());//獲取傳進來stateconst dispatchProps = bindActionCreators(mapDispatchToProps,store.dispatch);//把action封裝成dispatch(action)this.setState({props:{...this.state.props,...stateProps,...dispatchProps}})}render(){return(//把傳遞進來的state和封裝后的dispatch(action)作為props傳到目標組件<WrapComponent {...this.state.props}></WrapComponent>)}}return ConnectComponent; }

中間件

中間件利用applyMiddleWare來增強createStore函數，類似于裝飾器模式，先來看看createStore函數的簡版實現

createStore函數

export function createStore(reducer,enhancer) {if(enhancer){//如果存在store增強器，就對createStore進行封裝return enhancer(createStore)(reducer);}let currentState = {};//保存項目當前的state，默認為空對象let currentListeners = [];//用來存放監聽store變化的函數//用來獲取當前的statefunction getState() {return currentState;}//派發actionfunction dispatch(action) {currentState = reducer(currentState,action);//使用reducer處理當前派發過來的actioncurrentListeners.forEach(currentListener => currentListener());//處理完成后返回新的state觸發store的改變，遍歷監聽store變化的函數并執行使組件發生變化return action;}//增加監聽store變化的函數function subscribe(listener) {currentListeners.push(listener);}//移除取消監聽store變化的函數function unsubscribe(listener) {currentListeners = currentListeners.filter(l => l !== listener)}dispatch({type:'xxxx'});//觸發初次調用，type可以設任意值，但是必須要走default的case，獲取默認值傳給組件初始化return {getState,dispatch,subscribe,unsubscribe};//返回store內部的三個函數供外部調用 }

applyMiddleWare函數

上面看到存在store增強器，其實也就是applyMiddleWare函數，返回兩層嵌套的函數，主要是針對store的dispatch方法進行增強，讓dispatch的action不是直接到達reducer函數進行處理，而是經過層層的中間件，所以applyMiddleWare函數簡版實現如下：

function applyMiddleWare(...middlewares) {return createStore => (...args) => {const store = createStore(...args);//根據reducer和初始值創建原生storelet dispatch = store.dispatch;//獲取原生store的dispatch函數//中間件是嵌套了兩層函數的函數，接收getState和dispatch作為參數const middlewareApi = {getState: store.getState,dispatch: (...args) => dispatch(...args)}const middlewareChain = middlewares.map(middleware => middleware(middlewareApi));//獲取傳遞進來的中間件，并且初始化中間件函數dispatch = compose(...middlewareChain)(store.dispatch);//組合多個中間件，并且把原生的dispatch放在作為最后一個中間件的dispatch參數//單個中間件的做法：dispatch = middleware(middlewareApi)(store.dispatch);//返回經過增強dispatch函數的storereturn{...store,dispatch}} }

compose函數

compose函數是把多個中間件組合在一起，把compose(fn1,fn2,fn3)轉換為fn1(fn2(fn3))的形式，函數從右往左執行，其實就是下一個函數執行結果作為前一個函數的參數，對應在這里就是把下一個中間件作為前一個中間函數的next參數，compose的簡版源碼如下：

function compose(...fns){if(fns.length === 0){return arg => arg}else if(fns.length === 1){return fns[0]}else{//返回結果：(...args) = > fn1(fn2(fn3(...args)))return fns.reduce((result,item) => (...args) => result(item(...args)));} }

thunk中間件簡版實現

const thunk = ({dispatch,getState}) => next => action => {//如果action是一個函數，就執行該函數if(typeof action === 'function'){return action(dispatch,getState);}//否則，如果當前中間件不是最后一個中間件，就把action傳遞到下一個中間件中執行//如果當前中間件已經是最后一個中間件，那么next就是store上原生的dispatch，直接給到reducer處理了return next(action); }export default thunk;

定制中間件

我們嘗試手動定制一個中間件arrayThunk，判斷action是否為數組類型，如果為數組類型，就遍歷數組，把數組中的元素作為action進行重新派發：

const arrayThunk = ({dispatch,getState}) => next => action => {if(Array.isArray(action)){return action.forEach(item => dispatch(item));}return next(action); }export default arrayThunk;

正常調用即可：

const store = createStore(count,applyMiddleWare(thunk,arrayThunk));

總結

以上是生活随笔為你收集整理的react-redux简版实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。