React+Redux：已按规范配置，根Provider仍无法让connect找到store求助

兄弟，我一眼就瞅出你代码里的核心问题了——你在index.jsx里创建的context和ContainerComponent.jsx中connect配置里的context根本不是同一个对象！

问题根源 #

你大概率是在两个文件里分别调用了React.createContext(undefined)，或者没有正确把index.jsx里创建的Context导入到容器组件中。这就导致<Provider>用的是Context实例A，而connect的组件用的是Context实例B，两者完全不匹配，自然会抛出找不到store的错误。

而你说单独包裹容器组件时生效，那是因为当时Provider和Connect在同一个文件里，用的是同一个Context实例，所以能正常匹配。

修复方案 #

方案1：统一使用自定义Context（推荐如果你确实需要自定义的话）

1. 先把自定义Context抽成单独的文件，比如src/reduxContext.js：

import React from 'react';
export const reduxContext = React.createContext(undefined);

2. 在index.jsx里导入这个Context并传给Provider：

import React from 'react';
import { render } from 'react-dom';
import { Provider, createStore } from 'react-redux';
import App from './App';
import { reduxContext } from './reduxContext';
import reducer from './reducer';
import state from './initialState';

const store = createStore(reducer, state);

render(
  <Provider store={store} context={reduxContext}>
    <App />
  </Provider>,
  document.getElementById("app")
);

3. 在ContainerComponent.jsx里导入同一个Context，传给connect的配置项：

import { connect } from 'react-redux';
import MyComponent from './MyComponent';
import { reduxContext } from './reduxContext';

const mapStateToProps = (state) => {
  // 你的mapState逻辑
};

const mapDispatchToProps = (dispatch) => {
  // 你的mapDispatch逻辑
};

export const ContainerComponent = connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  { context: reduxContext }
)(MyComponent);

方案2：使用React-Redux默认Context（更简单，除非你有特殊需求）

如果你没有自定义Context的必要，完全可以去掉所有自定义Context的代码，直接用默认的：

// index.jsx
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("app")
);

// ContainerComponent.jsx
export const ContainerComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

这样就能保证Provider和Connect使用同一个默认Context，自然能正确找到store了。

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