其实connect才是React-Redux中最难的部分，里面功能复杂，考虑的因素很多，想要把它搞明白我们需要一层一层的来看，首先我们实现一个只具有基本功能的connect。
import React, { useContext } from 'react'; import ReactReduxContext from './Context'; // 第一层函数接收mapStateToProps和mapDispatchToProps function connect(mapStateToProps, mapDispatchToProps) { // 第二层函数是个高阶组件，里面获取context // 然后执行mapStateToProps和mapDispatchToProps // 再将这个结果组合用户的参数作为最终参数渲染WrappedComponent // WrappedComponent就是我们使用connext包裹的自己的组件 return function connectHOC(WrappedComponent) { function ConnectFunction(props) { // 复制一份props到wrapperProps const { ...wrapperProps } = props; // 获取context的值 const context = useContext(ReactReduxContext); const { store } = context; // 解构出store const state = store.getState(); // 拿到state // 执行mapStateToProps和mapDispatchToProps const stateProps = mapStateToProps(state); const dispatchProps = mapDispatchToProps(store.dispatch); // 组装最终的props const actualChildProps = Object.assign({}, stateProps, dispatchProps, wrapperProps); // 渲染WrappedComponent return <WrappedComponent {...actualChildProps}></WrappedComponent> } return ConnectFunction; } } export default connect; 触发更新用上面的Provider和connect替换官方的react-redux其实已经可以渲染出页面了，但是点击按钮还不会有反应，因为我们虽然通过dispatch改变了store中的state，但是这种改变并没有触发我们组件的更新。之前Redux那篇文章讲过，可以用store.subscribe来监听state的变化并执行回调，我们这里需要注册的回调是检查我们最终给WrappedComponent的props有没有变化，如果有变化就重新渲染ConnectFunction，所以这里我们需要解决两个问题：
当我们state变化的时候检查最终给到ConnectFunction的参数有没有变化
如果这个参数有变化，我们需要重新渲染ConnectFunction
检查参数变化要检查参数的变化，我们需要知道上次渲染的参数和本地渲染的参数，然后拿过来比一下就知道了。为了知道上次渲染的参数，我们可以直接在ConnectFunction里面使用useRef将上次渲染的参数记录下来：
// 记录上次渲染参数 const lastChildProps = useRef(); useLayoutEffect(() => { lastChildProps.current = actualChildProps; }, []);注意lastChildProps.current是在第一次渲染结束后赋值，而且需要使用useLayoutEffect来保证渲染后立即同步执行。
因为我们检测参数变化是需要重新计算actualChildProps，计算的逻辑其实都是一样的，我们将这块计算逻辑抽出来，成为一个单独的方法childPropsSelector:
function childPropsSelector(store, wrapperProps) { const state = store.getState(); // 拿到state // 执行mapStateToProps和mapDispatchToProps const stateProps = mapStateToProps(state); const dispatchProps = mapDispatchToProps(store.dispatch); return Object.assign({}, stateProps, dispatchProps, wrapperProps); }然后就是注册store的回调，在里面来检测参数是否变了，如果变了就强制更新当前组件，对比两个对象是否相等，React-Redux里面是采用的shallowEqual，也就是浅比较，也就是只对比一层，如果你mapStateToProps返回了好几层结构，比如这样：
{ stateA: { value: 1 } }你去改了stateA.value是不会触发重新渲染的，React-Redux这样设计我想是出于性能考虑，如果是深比较，比如递归去比较，比较浪费性能，而且如果有循环引用还可能造成死循环。采用浅比较就需要用户遵循这种范式，不要传入多层结构，。我们这里直接抄一个它的浅比较：
// shallowEqual.js function is(x, y) { if (x === y) { return x !== 0 || y !== 0 || 1 / x === 1 / y } else { return x !== x && y !== y } } export default function shallowEqual(objA, objB) { if (is(objA, objB)) return true if ( typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null ) { return false } const keysA = Object.keys(objA) const keysB = Object.keys(objB) if (keysA.length !== keysB.length) return false for (let i = 0; i < keysA.length; i++) { if ( !Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]]) ) { return false } } return true }在回调里面检测参数变化:
// 注册回调 store.subscribe(() => { const newChildProps = childPropsSelector(store, wrapperProps); // 如果参数变了，记录新的值到lastChildProps上 // 并且强制更新当前组件 if(!shallowEqual(newChildProps, lastChildProps.current)) { lastChildProps.current = newChildProps; // 需要一个API来强制更新当前组件 } }); 强制更新