title: Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a <Provider>,
body: <p>I am setting up React-Redux to my web application, I have been getting a Could not find "store" in the context of "Connect(Register)". </p>
  
  <p>I figured maybe I would have to pass the store that I created in [[2]] <code>store.js</code> and it worked but I haven't seen it done this way online and when I tried using redux DevTools it kept showing no store found. </p>
  
  <p>I thought the purpose of connect() was to wrap around the component and access the global state in redux via mapStateToProps. If someone could point me in the right direction or possibly explain why I am getting this error would great!</p>
  
  <p>Something things I have tried: </p>
  
  <ol>
  <li><p>Since I was had a container component LoginContainer.js (which I could access via connect()(LoginContainer) I thought I would able to access the state here and pass down the props to register.js component and then propagate up state changes.</p></li>
  <li><p>I have been thinking of changing register.js to a functional component because maybe this may be affecting it somehow?</p></li>
  </ol>
  
  <p>I have been reading about context and how by using <code>&lt;Provider store={store}&gt;</code> at the index.js it should have allowed access to the Redux store via connect(mapState,MapDispach)(Component) however I still cannot distinguish how or when I am losing to context to Provider. </p>
  
  <pre class="lang-js prettyprint-override"><code>//index.js
  
  import React from "react";
  import ReactDOM from "react-dom";
  import App from "./App";
  import { Provider } from "react-redux"
  import { BrowserRouter, Route } from "react-router-dom";
  import store from "./store";
  
  ReactDOM.render(
    &lt;BrowserRouter&gt;
      &lt;Provider store={store}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/BrowserRouter&gt;,
    document.getElementById("root")
  );
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// App.js 
  
  import React, { Component } from "react";
  import {
    Route,
    Switch
  } from "react-router-dom";
  import LoginContainer from "./containers/login";
  class App extends Component{
    render() {
      return (
            &lt;div className="App"&gt;
            &lt;header className="App-header"&gt;
            &lt;Switch&gt;
            &lt;Route path='/login' component={LoginContainer} /&gt;
            &lt;/Switch&gt;
            &lt;/header&gt;
            &lt;/div&gt;
  
      );
    }
  }
  
  export default App;
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>
  // LoginContainer.js 
  import React, { Component } from "react";
  import ReactDOM from "react-dom";
  import Register from "../componets/Registration/register";
  import Login from "../componets/Login/login";
  import { withRouter } from "react-router-dom";
  import { Input, Button } from "semantic-ui-react";
  import { connect } from "react-redux";
  import store from "../store";
  class LoginContainer extends Component {
    constructor(props) {
      super(props);
      this.state = {
          //some local UI states
      };
    }
    render() {
      return (
        &lt;div&gt;
          &lt;div className="ToggleContainer"&gt;
            &lt;div className={"toggle"}&gt;
              &lt;Button.Group&gt;
                &lt;Button
                  onClick={this.registerHandler}
                  positive={this.state.registerOn}
                &gt;
                  SignUp
                &lt;/Button&gt;
                &lt;Button.Or /&gt;
                &lt;Button onClick={this.loginHandler} positive={this.state.loginOn}&gt;
                  Login
                &lt;/Button&gt;
              &lt;/Button.Group&gt;
            &lt;/div&gt;
   &lt;Provider store = {store}&gt; &lt;Register {...this.props} /&gt; &lt;/Provider&gt; // [[6]], uncommented [[4]] works but is it different than method [[1]]?
   //  &lt;Register{...this.props} /&gt; // [[2]] cannot connect to store
         // &lt;Register store={store} {...this.props} /&gt;} [[1]] can connect store via directly sending store //
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  
    // ReactDOM.render(&lt;LoginContainer /&gt;,  document.getElementById("root")); [[answer]] removing this fixed the problem
  
  const mapStateToProps = state =&gt; {
    return {
      loggedIn: state.registration.isLoggedIn
    };
  };
  
  const mapDisptachToProps = dispatch =&gt; ({
    registerUser: id =&gt; dispatch({ type: "SIGN_IN" })
  });
  export default withRouter(
    connect(
      mapStateToProps,
      mapDisptachToProps
    )(LoginContainer)
  );
  
  
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>//components/register.js
  
  import React, { Component } from "react";
  import { Input, Button } from "semantic-ui-react";
  
  import { connect } from "react-redux";
  
  class Register extends Component {
    constructor(props) {
      super(props);
      // Local State
  
    }
     const check() {
     let userData: User;
      if (validEmail(this.state.email)) {
        userData = {
         //data 
        };
  
       let user = await this.handleSignUp(userData);
         const res = JSON.parse(user);
  
          if (res.message === "Success") {
            alert('Account success')
          }
        if(typeof user === 'string'){
           user =JSON.parse(user)
        }
      } else {
        this.setState({ hiddenErrorMessage: false });
      }
      this.props.registerUser(userData);
  
      // func: returns true if it is valid, o.w. false
      function validEmail(email) {
  
      }
    };
    //handlers()
  
    render() {
      return (
        // eslint-disable-next-line react/jsx-filename-extension
        &lt;div&gt;
          &lt;Input
            className="customInput"
            onChange={this.handleEmail}
            placeholder="Email"
          /&gt;
          &lt;Input
            className="customInput"
            onChange={this.handlePassword}
            placeholder="Password"
            type="password"
          /&gt;
          &lt;br /&gt;
          &lt;Button
            size="big"
            className="customButton"
            onClick={this.checkUserInput}
          &gt;
            Sign up
          &lt;/Button&gt;
          &lt;p&gt;
            &lt;span hidden={this.state.hiddenErrorMessage}&gt;
              Invalid Email/Passoword
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
  
   return {
     loggedIn:state.registration.isLoggedIn
   }
  };
  
  const mapDisptachToProps = dispatch =&gt; ({
    registerUser: id =&gt;  dispatch({ type: "SIGN_IN" }) // return dispatch
  });
  
  export default Register // [[3]] Works as expected
  // export default connect( [[4]] Could not find "store" in the context of "Connect(Register)". Either wrap the root component in a &lt;Provider&gt; Error
  //   mapStateToProps,
  //   mapDisptachToProps
  // )(Register);
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>
  //store.js 
  
  import { createStore } from "redux";
  import rootReducer from './reducers';
  
  export default createStore(rootReducer);
  
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>//reducers/index.js
  
  import { combineReducers } from "redux";
  import registration from "./registration";
  
  export default combineReducers({ registration });
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>//actionType.js
  const SIGN_IN = 'SIGN_IN';
  
  export { SIGN_IN };
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>//reducers/registration.js
  
  const initialState = {
    isAuthenticated: false,
    isLoggedIn: false,
    isLoggedOut: false,
    userId : ''
  };
  
  export default (state = initialState, action) =&gt; {
    if (action.type === "SIGN_IN") {
      return { ...state, isLoggedIn: true };
    }
    if (action.type === "SIGN_OUT") {
      return { ...state, isLoggedOut: true };
    }
    return state;
  };
  </code></pre>