使用redux-form时出现Could not find store错误的排查求助

嘿，我看到你遇到了redux-form找不到store的问题，这其实是Provider的使用方式和组件嵌套结构不对导致的。咱们一步步来修复：

问题根源 #

1. Root组件的Provider没有包裹子组件：你的Root.js里<Provider store={store} />是空的，没有把应用的其他组件包含进去，导致redux的store无法通过上下文传递给子组件。
2. 组件嵌套顺序错误：index.js里把<Root>放在<App>内部，这完全搞反了——应该是Provider（也就是Root）包裹整个App，这样App里的所有组件才能访问到store。

修改后的代码 #

1. 更新Root.js #

让Root组件接收children属性，并把它放在Provider内部：

import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';

const Root = ({ store, children }) => (
  <Provider store={store}>
    {children}
  </Provider>
);

Root.propTypes = {
  store: PropTypes.object.isRequired,
  children: PropTypes.node.isRequired,
};

export default Root;

2. 更新index.js #

调整组件嵌套顺序，让App作为Root的子组件：

import React from 'react';
import { render } from 'react-dom';
import Root from './Root';
import './index.css';
import App from './whitesheet-components/App';
import registerServiceWorker from './registerServiceWorker';
import configureStore from './store/configureStore';

const { store } = configureStore();
const MOUNT_NODE = document.getElementById('root');

render(
  <Root store={store}>
    <App />
  </Root>,
  MOUNT_NODE,
);

registerServiceWorker();

为什么这样能解决问题？ #

React-Redux的Provider组件的作用是把redux store注入到整个应用的上下文环境中，只有被Provider包裹的组件（及其子组件）才能通过connect高阶组件访问到store。你之前的写法里，App和里面的Form组件根本不在Provider的覆盖范围内，所以redux-form的Connect(Form(Form))找不到store就报错了。

调整后，整个App都被Provider包裹，所有需要和redux交互的组件都能正常获取到store，你的redux-form应该就能正常工作了。

内容的提问来源于stack exchange，提问作者victor.ja