React+Redux自定义connect报错：Cannot read properties of undefined (reading 'getState')

问题原因 #

你自定义的connect组件使用的是自己创建的StoreContext，但你引入的react-redux自带的Provider只会把store注入到react-redux内部的Context实例，你自己定义的StoreContext没有被任何Provider赋值，所以读取到的是undefined。
你看到App组件能拿到context属于测试误差，你的App代码没有设置contextType，理论上也读不到对应Context的值。

修复方案（二选一即可） #

方案1：使用自定义Provider替换react-redux的Provider #

1. 新增自定义Provider组件：

// /utils/Provider.js
import React from "react";
import { StoreContext } from "./context";

export default function MyProvider({ store, children }) {
  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
}

2. 修改index.js的Provider引用：

// 替换原来的import { Provider } from "react-redux"
import MyProvider from "./utils/Provider";

// 渲染部分替换为
ReactDOM.render(
  <MyProvider store={store}>
    <App />
  </MyProvider>,
  document.getElementById("root")
);

方案2：自定义connect直接使用react-redux的内置Context #

修改connect.js的Context引入，无需自定义Context和Provider：

// connect.js
// 替换原来的import { StoreContext } from "./context"
import { ReactReduxContext } from "react-redux";

// 把EnhanceCpn.contextType改为ReactReduxContext
EnhanceCpn.contextType = ReactReduxContext;

注意：react-redux的ReactReduxContext返回的值是包含store的对象，需要修改所有读取context的地方，改为从context.store上读取方法：
比如context.getState()改为context.store.getState()，context.subscribe改为context.store.subscribe，context.dispatch改为context.store.dispatch。

其他需要修复的问题 #

1. 订阅更新时的state键名错误，你在constructor中初始化的state键为storeState，但订阅回调中设置的是counter，会导致数据更新时组件无法同步：

// connect.js componentDidMount修改为
componentDidMount() {
  this.unSubscribe = this.context.subscribe(() => {
    this.setState({
      storeState: mapStateToProps(this.context.getState()),
    });
  });
}

2. 增加参数默认值兼容不传参数的场景，避免调用报错：

// connect.js参数增加默认值
export default function connect(mapStateToProps = state => state, mapDispatchToProps = dispatch => ({dispatch})) {
  // 原有逻辑
}

内容的提问来源于stack exchange，提问作者Graham Quan