React Redux Error - Не удалось найти хранилище в контексте «Connect (Form (SignUpForm))»

Question

В настоящее время я пытаюсь настроить форму Redux с моим приложением React. Я делал это несколько раз и никогда не сталкивался с такой ошибкой. Я просмотрел несколько прошлых проектов, учебных пособий и документов. Однако я всегда возвращаюсь к этой ошибке.

Error: Could not find "store" in the context of "Connect(Form(SignUpForm))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Form(SignUpForm)) in connect options.

Ниже мой код. Я был бы очень признателен за любую помощь.

магазин. js

import {createStore, combineReducers} from 'redux';
import { reducer as reduxFormReducer} from 'redux-form';

// Import Reducers
import { userReducer } from './reducers/userReducer';

export default () => {
  const store = createStore(
    combineReducers({
      form: reduxFormReducer,
      userReducer
    })
  );

  return store
};

Индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import AppRouter from './routes/AppRouter.js';
import { Provider } from "react-redux";

import configureStore from './redux/configureStore';

import './sass/main.scss'

const store = configureStore();
console.log(store.getState());

ReactDOM.render(<Provider store={store}><AppRouter /></Provider>, document.getElementById('root'));

serviceWorker.unregister();

SignUpForm. js

import React from 'react';

// Redux
import { Field, reduxForm } from "redux-form";
import {connect} from 'react-redux';


let SignUpForm = props => {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

SignUpForm = reduxForm({
  form: 'signup'
})(SignUpForm);

export default SignUpForm;

SignUpPage. js

import React from 'react';

// Components
import SignUpForm from './../components/SignUpForm';

class SignupPage extends React.Component {

  submit = values => {
    // print the form values to the console
    console.log(values)
  }

  render() {
    return (
      <div>
        <h1> SignupPage </h1>
        <SignUpForm onSubmit={this.submit} />
      </div>
    )
  }
};

export default SignupPage;

App Router Ниже приведена страница импорта страницы регистрации.

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

// Pages
import LandingPage from './../pages/LandingPage';
import LoginPage from './../pages/LoginPage';
import SignUpPage from './../pages/SignUpPage';
import NotFoundPage from './../pages/NotFoundPage';

class AppRouter extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route path="/" component={LandingPage} exact={true} />
            <Route path="/login" component={LoginPage} />
            <Route path="/signup" component={SignUpPage} />
            <Route component={NotFoundPage} />
          </Switch>
        </div>
      </Router>
    )
  }
};

export default AppRouter;