React-redux源码解析--Provider.js

头像为自己开发微信小程序

已于 2023-12-12 16:50:46 修改

阅读量1k

点赞数

分类专栏： React-redux源码解析文章标签： react.js javascript 前端

于 2022-01-19 18:38:39 首次发布

本文链接：https://blog.csdn.net/qq_33715850/article/details/122582210

版权

React-redux源码解析专栏收录该内容

5 篇文章 0 订阅

订阅专栏

总结：react-redux必须使用Provider在最外层包裹组建。因为通过connect方法加强的组建在生成过程中使用到store，且是通过useContext来获取，那么就需要它必须被Provider包裹才能通过useContext来获取store。

//TODO subscription逻辑还没搞懂

Provider.js返回Provider，Provider被当作一个顶层组件使用，例如：

接受三个Props

store：通过createStore生产的对象，对象内部属性

context：通过React.createContext生存的上下问，如果传入使用自定义的，否则使用默认值

ReactRedux

children：子组件，组件层级的根组件。

代码解析

const subscription = createSubscription(store)= {
  addNestedSub,

  notifyNestedSubs,

  handleChangeWrapper,

  isSubscribed,

  trySubscribe,

  tryUnsubscribe,

  getListeners: () => listeners,

}

const contextValue={
  store,
  subscription,
}

previousState等于当前state树对象。

Provider.js是优先于connect.js执行的，但是又因为useIsomorphicLayoutEffect=useLayoutEffect，导致useIsomorphicLayoutEffect内部代码是在connect.js之后执行。

通过断点发现在执行connect(mapStateToProps, mapDispatchToProps)(App)时候，

就已经提前执行了一次createSubscription方法，

在生产包装组件Connect时候执行ConnectFunction方法会执行一个

执行subscribeUpdates方法，在subscribeUpdates方法中有一行执行

subscription.onStateChange = checkForUpdates

subscription.trySubscribe()

执行subscription.trySubscribe()

第一次执行unsubscribe为空

TODO//待续

推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩