javascript - 无法使用 redux-form 找到商店

Question

控制台抛出以下错误:

Could not find "store" in either the context or props of "Connect(Form(Form))". Either wrap the root component in a < Provider >, or explicitly pass "store" as a prop to "Connect(Form(Form))".

按照 redux-form 教程中的说明完成所有操作，之前 store 使用的是模拟 reducer。

出现错误的行是执行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 };
}

index.js

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();

Root.js

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;

rootReducer.js

// 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;

Form.js

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);

ExerciseCreator.js

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


import './styles.css';

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

export default ExerciseCreator;

Answer 1

让提供者包装您的 App 组件，而不是相反。像这样:

// 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...