React 数据管理 - Reac-Redux

react-redux - 7.2.3

1.Provider 中主要功能创建 contextValue, Context.Provider 提供了数据 contextValue

2. connect 接收三个参数 mapStateToProps,mapDispatchToProps,mergeProps，主要功能为处理传入的参数，并返回一个函数


match函数从后往前遍历传入的 factories 参数，有返回值则推出循环并返回返回值

initMapStateToProps：没有传入mapStateToProps（函数）时，添加默认的值和函数
defaultMapStateToPropsFactories为一个包含函数的数组


initMapDispatchToProps：没有传入mapDispatchToProps（函数或对象）时，添加默认的函数
defaultMapDispatchToPropsFactories为一个包含函数的数组

initMergeProps：将传入的 mergeProps，和 前两个参数得到的最终的返回值合并在一起作为组件的 props

connect()(组件) 返回一个 forwardRef组件，hoistStatics的作用为：将WrappedComponent中的属性或者方法添加到 forwarded

ConnectFunction返回经过优化，并且注入参数的组件
1.处理传入的 props （<组件 属性 />组件传入的属性）

2.childPropsSelector的值为 pureFinalPropsSelector 函数


1. initMapStateToProps 函数 和 initMapDispatchToProps 函数 实际调用 initProxySelector 函数 （mapStateToProps有值,
mapDispatchToProps有值并且为函数）


2.initMapStateToProps 函数和 initMapDispatchToProps 函数实际调用 initConstantSelector函数（mapStateToProps无值, mapDispatchToProps无值或者有值为函数）

3.创建组件的 subscription, notifyNestedSubs，并且将 Provider 的 subscription 作为组件 subscription 的 parentSub

4. overriddenContextValue 将 subscription 替换为组件 subscription

5.使用 useReducer 触发 React 组件更新




5. previousStateUpdateResult, wrapperProps（<组件 属性 />）变更时，计算 actualChildProps，调用 pureFinalPropsSelector =》handleFirstCall



mapStateToProps有值,mapDispatchToProps有值为函数时,mapStateToProps 为 proxy 的 mapToPropsProxy

mapStateToProps无值,mapDispatchToProps无值，或者有值为对象时,mapStateToProps 为 constantSelector函数

6.返回组件


7.组件渲染后执行 LayoutEffect

第三个参数作为 useLayoutEffect 的 dependencies, 此函数无参数，每次都会执行

subscribeUpdates 方法中将 subscription.onStateChange = checkForUpdates，并调用 trySubscribe 和 checkForUpdates 方法

trySubscribe 的 parentSub 为 Provider 的 subscription，调用 parentSub.addNestedSub，并将 子 subscription 的 handleChangeWrapper 作为参数

listeners为parenSub中的 listeners，listener为子 subscription的handleChangeWrapper

将 Provider subscription 中的handleChangeWrapper函数注册到了store.subscribe中，Provider subscription中的 listeners 为 createListenerCollection的返回值


trySubscribe执行完，return listeners.subscribe(listener)


parentSub.addNestedSub 执行完，parentSub subscription 执行 listeners = createListenerCollection()

checkForUpdates（）



在调用 dispatch 函数时，会调用 store.subscribe() 注册的 parentSub subscription handleChangeWrapper函数






3.useStore



4.useReduxContext

5.useDispatch

6.useSelector 接收两个参数，selector 为 获取 state 的函数，equalityFn为新旧state值的对比函数



获取新的selectedState值