总结

1.React和Redux没关系 产生关联的是React-Redux这个库
image.png

Redux原理

image.png

源码

调用

image.png

Redux - createStore

总结

image.png

源码

image.png
image.png
image.png
image.png

React-Redux做了什么?

跟Store有关的两个 Provider connect

  1. Provider : 传递Store到每个组件
  2. connect : 将Store作为Props绑定到特定组件
  3. connect 的两个参数
    • mapStateToProps : 订阅Store的更新
    • mapDispatchToProps : 改变Store

image.png

React-Redux - Provider

总结

通过React的Context API把数据传下去(getChildContext())

调用

image.png

源码

image.png

React-Redux - connect

总结

image.png

调用

image.png

容器组件中传入的两个参数

  1. 下源码update中调用sotre.getState()获取所有state，再通过我们的mapStateToProps函数return对应key的value值
  2. mapDispatchToprops同理，获取dispatch

image.png

源码

image.png
image.png