Не удалось найти магазин с использованием приставки

Question

Консоль выдает следующую ошибку:

Не удалось найти «store» ни в контексте, ни в подпунктах «Connect (Форма (Форма))». Либо оберните корневой компонент в , либо явно передайте «store» в качестве реквизита «Connect (Form (Form))».

Сделано все, как сказано в уроке по редуксу, ранее магазин работал с имитатором редуктора.

Строка, в которой появляется ошибка, - это место, где выполняется 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...