Javascript 无法使用redux表单找到存储

控制台正在抛出以下错误：

在“Connect（Form（Form））”的上下文或道具中找不到“store”。将根组件包装在中，或者将“store”作为prop显式传递给“Connect（Form（Form））”

完成了redux表单教程中所述的所有操作，之前store使用的是模拟减速机

出现错误的那一行是执行render（）的地方-请看index.js文件-

configureStore.js

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from './rootReducer';


export default function configureStore(initialState = {}) {
  const store = createStore(rootReducer, initialState, devToolsEnhancer());

  return { store };
}

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(
  <App>
    <Root store={store} />
  </App>,
  MOUNT_NODE,
);


registerServiceWorker();

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

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

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

export default Root;

// use combineReducers when they are more than one
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import mockReducer from './mockReducer';

const rootReducer = combineReducers({
  mockReducer,
  form,
});

export default rootReducer;

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import PropTypes from 'prop-types';
import titleField from './titleField';

const Form = (props) => {
  const {
    handleSubmit, submitting,
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field component={titleField} />
      <div>
        <button type="submit" disabled={submitting}>
            Submit
        </button>
        <button type="button" disabled={submitting} onClick={() => console.log('boton para agregar input')}>
            +
        </button>
      </div>
    </form>
  );
};

Form.propTypes = {
  handleSubmit: PropTypes.any.isRequired,
  submitting: PropTypes.any.isRequired,
};


// validate: nombreFuncion, // <--- validation function given to redux-form
export default reduxForm({
  form: 'exerciseCreatorForm', // a unique identifier for this form
})(Form);

import React from 'react';
import Form from './Form';


import './styles.css';

const ExerciseCreator = () => (
  <div className="component-exercise-creator">
    <Form />
  </div>
);

export default ExerciseCreator;

index.js

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from './rootReducer';


export default function configureStore(initialState = {}) {
  const store = createStore(rootReducer, initialState, devToolsEnhancer());

  return { store };
}

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(
  <App>
    <Root store={store} />
  </App>,
  MOUNT_NODE,
);


registerServiceWorker();

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

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

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

export default Root;

// use combineReducers when they are more than one
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import mockReducer from './mockReducer';

const rootReducer = combineReducers({
  mockReducer,
  form,
});

export default rootReducer;

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import PropTypes from 'prop-types';
import titleField from './titleField';

const Form = (props) => {
  const {
    handleSubmit, submitting,
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field component={titleField} />
      <div>
        <button type="submit" disabled={submitting}>
            Submit
        </button>
        <button type="button" disabled={submitting} onClick={() => console.log('boton para agregar input')}>
            +
        </button>
      </div>
    </form>
  );
};

Form.propTypes = {
  handleSubmit: PropTypes.any.isRequired,
  submitting: PropTypes.any.isRequired,
};


// validate: nombreFuncion, // <--- validation function given to redux-form
export default reduxForm({
  form: 'exerciseCreatorForm', // a unique identifier for this form
})(Form);

import React from 'react';
import Form from './Form';


import './styles.css';

const ExerciseCreator = () => (
  <div className="component-exercise-creator">
    <Form />
  </div>
);

export default ExerciseCreator;

Form.js

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from './rootReducer';


export default function configureStore(initialState = {}) {
  const store = createStore(rootReducer, initialState, devToolsEnhancer());

  return { store };
}

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(
  <App>
    <Root store={store} />
  </App>,
  MOUNT_NODE,
);


registerServiceWorker();

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

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

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

export default Root;

// use combineReducers when they are more than one
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import mockReducer from './mockReducer';

const rootReducer = combineReducers({
  mockReducer,
  form,
});

export default rootReducer;

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import PropTypes from 'prop-types';
import titleField from './titleField';

const Form = (props) => {
  const {
    handleSubmit, submitting,
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field component={titleField} />
      <div>
        <button type="submit" disabled={submitting}>
            Submit
        </button>
        <button type="button" disabled={submitting} onClick={() => console.log('boton para agregar input')}>
            +
        </button>
      </div>
    </form>
  );
};

Form.propTypes = {
  handleSubmit: PropTypes.any.isRequired,
  submitting: PropTypes.any.isRequired,
};


// validate: nombreFuncion, // <--- validation function given to redux-form
export default reduxForm({
  form: 'exerciseCreatorForm', // a unique identifier for this form
})(Form);

import React from 'react';
import Form from './Form';


import './styles.css';

const ExerciseCreator = () => (
  <div className="component-exercise-creator">
    <Form />
  </div>
);

export default ExerciseCreator;

从“React”导入React；
从“redux form”导入{Field，reduxForm}；
从“道具类型”导入道具类型；
从“/titleField”导入titleField；
常量形式=（道具）=>{
常数{
提交，提交，
}=道具；
返回(
提交
console.log（'boton para agregar input'）}>
+
);
};
Form.propTypes={
handleSubmit:PropTypes.any.isRequired，
提交：需要PropTypes.any.isRequired，
};
//验证：nombrefunction，//(
);
导出默认值；

让提供商包装您的

应用程序组件，而不是相反。像这样：

// Root.js
// ...other codes...
const Root = ({ store, children }) => (
  <Provider store={store}>{children}</Provider>
);
// ...other codes...

// index.js
// ...other codes...
render(
  <Root store={store}>
    <App />
  </Root>,
  MOUNT_NODE,
);
// ...other codes...

//Root.js
//…其他代码。。。
常量根=（{store，children}）=>(
{儿童}
);
//…其他代码。。。
//index.js
//…其他代码。。。
渲染(
,
MOUNT_节点，
);
//…其他代码。。。
你把你的
表单
组件放在哪里？张贴呈现
的组件最后添加了该文件@tr1是你的
ExerciseCreator
位于
应用程序
组件的某处？是的，ExerciseCreator在Home里面，Home在App
const App=（）=>（）
谢谢您的帮助！你能解释一下为什么它在redux表单之前是以另一种方式工作的吗？
redux
使用React的
Context
API来存储状态，并且
Context
只能由其子组件访问。
提供程序是初始化
上下文的组件。用户可以查看
上下文
API。