react 判断地址是否有效_继续，react-redux原理解析

本文原文链接

在之前的一篇文章中已讲过redux 原理解析，我将redux返回的store对象挂载在window中，不是太懂的同学可以看看之前的redux 原理解析。

const reducer = combineReducers({home: homeNumber,number: addNumber
})
const store = createStore(reducer)
window.$reduxStore = store// 使用
window.$reduxStore.dispatch(action);
let { state } = window.$reduxStore.getState()

但在平时的开发中，一般是将redux+react-redux+react配合使用，那么，下面就一起来看看react-redux中的常见方法，它具体做了什么。【下面是以最新版本react-redux@7.1.3库解析】(下面的源码部分省略)

#Provider函数

react-redux提供了<Provider />组件用来挂载redux返回的store对象，同时将整个应用作为Provider的子组件。

ReactDOM.render( <Provider store={store}> <App /> </Provider>,   rootElement )

下面看看<Provider />组件做了什么：

function Provider({ store, context, children }) {// 依赖项store变化触发，返回store和subscriptionconst contextValue = useMemo(() => {// 订阅监听Subscription函数，下面会专门说到const subscription = new Subscription(store)subscription.onStateChange = subscription.notifyNestedSubsreturn {store,subscription}}, [store])//...// ReactReduxContext = React.createContext(null)const Context = context || ReactReduxContextreturn <Context.Provider value={contextValue}>{children}</Context.Provider>
}
// 源码地址：https://github.com/reduxjs/react-redux/blob/master/src/components/Provider.js#L6

Provider接收三个参数，store参数接收store对象，context参数接收上下文对象，children参数接收ReactElement元素；在原应用组件上包裹一层，使原来整个应用成为Provider的子组件，Context.Provider API：只有当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。

将contextValue挂载在Provider上，contextValue包含store对象和订阅发布subscription对象，以备connect组件使用获取。Subscription主要负责connect、Provider组件的更新，属于核心内容，这些将在下面讲到。

#connect函数

connect的常见使用示例：

return connect(mapStateToProps, mapDispatchToProps)(Component)

connect函数就是一个高阶组件，将以上的参数传入函数，返回一个新的组件，主要就是将state和dispatch等属性挂载Component的props上。

import hoistStatics from 'hoist-non-react-statics'
import { ReactReduxContext } from './Context';// 核心函数 return组件
function ConnectFunction (props) {//  ...// 判断props 是否存在store & getState & dispatch，一般都为falsevar didStoreComeFromProps = Boolean(props.store) && Boolean(props.store.getState) && Boolean(props.store.dispatch);// 获取Provider组件挂载的contextValuevar ContextToUse = useMemo(function () {return propsContext &&propsContext.Consumer &&isContextConsumer(<propsContext.Consumer />)? propsContext: Context})// contextValue = { store, subscription }var contextValue = useContext(ContextToUse)//  ...// 依赖返回 contextValuevar overriddenContextValue = useMemo(function () {if (didStoreComeFromProps) {return contextValue}return {...contextValue,subscription}}, [didStoreComeFromProps, contextValue, subscription]);//  ...// actualChildProps == props，上挂载了```state```和```dispatch```等属性const renderedWrappedComponent = useMemo(() => <WrappedComponent {...actualChildProps} ref={forwardedRef} />,[forwardedRef, WrappedComponent, actualChildProps])// 返回渲染ReactElementvar renderedChild = useMemo(function () {// 判断是否存在mapStateToProps函数if (shouldHandleStateChanges) {return (<ContextToUse.Provider value={overriddenContextValue}>{renderedWrappedComponent}</ContextToUse.Provider>)}// renderedWrappedComponent 渲染容器组件return renderedWrappedComponent}, [ContextToUse, renderedWrappedComponent, overriddenContextValue]);return renderedChild;
}
//  ...
// 与Object.assign类似操作
return hoistStatics(ConnectFunction, WrappedComponent)

hoistStatics函数的作用就是类似于Object.assign，可以这样理解hoistStatics(targetComponent, sourceComponent)，hoist-non-react-statics库。上面代码中ConnectFunction是核心函数，虽然中间部分代码省略，不过留下的都是精华。

在ConnectFunction函数中，通过hooks useContext获取Provider组件的contextValue对象；renderedWrappedComponent将actualChildProps作为props传入，actualChildProps是已经处理过的props属性，上面已经挂载了dispatch函数和state状态等属性；而renderedChild组件，其实connect函数最后返回的实际内容。(中间部分代码省略了源码链接跳转)

以上就是Provice组件和connect组件初次调用时，所经过的实际代码，当然在其中有一些删减，不过基本都有说到。

当dispatch被调用时，会发生什么呢？上面部分完全没有说到，下面我们就来看看当dispatch(action)调用后，react-redux内部，是如何更新connect组件。

#connect如何更新？

当在React应用中调用dispatch函数时，redux中实际调用的就是reducer函数，同时返回新的state。那么redux-react中的connect组件如何更新呢，下面我们来一起看看更新的流程：

dispatch(action)

下面内容不是精读代码，只是聊一下基本的流程。

#初始化

当Provider组件被调用注册时，订阅更新Subscription函数被注册：

const subscription = new Subscription(store)

在redux-react中，订阅发布函数Subscription是其中的核心函数(订阅发布模式是其核心)，它有效的保证connect组件的更新渲染。store作为参数传入到Subscription构造函数内部，作用就是Subscription内部使用。

#订阅

return connect(mapStateToProps, mapDispatchToProps)(Component)// react-redux中，checkForUpdates函数，负责更新connect组件
subscription.onStateChange = checkForUpdates// redux保存触发 通知函数
store.subscribe(subscription.notifyNestedSubs);// react-redux保存 更新函数
subscription.listeners.subscribe(subscription.onStateChange)

在connect组件被使用时，react-redux中的subscription对象，会将connect组件的checkForUpdates更新函数作为参数，传入保存在subscription的订阅数组next中；同时，redux也会发生相同的操作【在react-redux中也有使用到redux中方法】。(代码为简化版)

// redux中 subscribe函数
let nextListeners = []
subscribe(listener) {// ... nextListeners.push(listener)
}
// react-redux中 subscribe函数
let next = []
subscribe(listener) {// ... next.push(listener)
}

checkForUpdates函数负责connect组件的内部的状态更新。

notifyNestedSubs函数是作用是触发react-redux中的subscription对象的更新函数，而它被保存在nextListeners数组中，是为了当redux的dispatch函数被触发时，调用notifyNestedSubs通知函数，进而触发react-redux的connect组件的checkForUpdates更新函数。

react-redux：checkForUpdates 函数源码

react-redux：Subscription 函数源码

#发布(更新)

dispatch(action)发起触发操作后，当然是触发store中dispatch函数了，修改store中state的值，更新遍历redux的nextListeners订阅数组，触发通知函数notifyNestedSubs调用；同时，这会导致react-redux中的next数组，被触发遍历调用。两个库基本都是下面的代码

let next = listeners;
for (let i = 0; i < listeners.length; i++) {listeners[i]()
}

以上细节可能有所省略，但基本就是先订阅，将更新函数保存进入订阅数组，然后当dispatch函数被调用时，遍历调用订阅数组，完成connect组件的更新。

在最新的react-redxu库中，有大量的React Hooks出现，中间我木有过多的说明，有兴趣可以自行研究。(高阶组件、React Hooks、订阅发布模式)

ps: 微信公众号：Yopai，有兴趣的可以关注，每周不定期更新。不断分享，不断进步