title: Getting error "state" is undefined in stateprovider and reducer using context API react, here is my code
body: <p>index.js file- where I have passed initial state and reducer</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  
  import reducer, { initialState } from './components/reducer';
  import { StateProvider } from './components/StateProvider';
  
  
  ReactDOM.hydrate(
    &lt;React.StrictMode&gt;
  
      &lt;StateProvider initialState={initialState} reducer={reducer}&gt;
     
      &lt;App /&gt;
  
      &lt;/StateProvider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );</code></pre>
  </div>
  </div>
  </p>
  <p>I'm getting error of state undefined, though state has initial value in reducer, and state provider is combined with reducer in index.js but still state is not getting initialized. Any help would be appreciated
  ...........................................................................
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import './App.css';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  import Header from './components/Header';
  import Feed from './components/Feed';
  import MessageSender from './components/MessageSender';
  import Sidebar from './components/Sidebar';
  import SidebarRow from './components/SidebarRow';
  import Story from './components/Story';
  import StoryReel from './components/StoryReel';
  import Widget from './components/Widget';
  import Login from './components/Login';
  import { useStateValue } from './components/StateProvider';
  import {useState} from 'react';
   
  
  function App() {
  
  
    const [state, setUser] = useStateValue()
       
  
    return (
  
      &lt;div className="app"&gt; 
    {!state.user ? (
           &lt;Login/&gt;
  
         ):(
         &lt;&gt;
         
         &lt;Header/&gt;
         
         &lt;div className="app__body"&gt;
         &lt;SidebarRow/&gt;
         &lt;Sidebar/&gt;
         &lt;Feed/&gt;
         &lt;Widget/&gt;
         &lt;/div&gt;
         
            &lt;/&gt;      
        )}
      &lt;/div&gt;
    );
  }
  
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>Login page.js
  .........................................................................................
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import "./Login.css";
  // import Button from '@material'
  
  import {firebase} from './GoogleAuth-fbase';
  import { actionTypes } from "./reducer"; 
  import { useStateValue } from './StateProvider';
  
  
  function Login(){
  
      const {state, dispatch} = useStateValue(); 
  
      const signIn = () =&gt;
      {
  
          var google_provider = new firebase.auth.GoogleAuthProvider();
          firebase.auth().signInWithPopup(google_provider)
          .then((result) =&gt; {
  
              dispatch({
                  type: actionTypes.SET_USER,
                  user: result.user,
              })
  
              // console.log(result);
          })
          .catch((err) =&gt; {console.log(err)});
      };
  
      return(
          &lt;div className="login"&gt;
  
          &lt;div className="login__logo"&gt;
          &lt;img src="https://i.pinimg.com/564x/6f/35/0d/6f350d177d15776f7874b5c4d0e68a5b.jpg" alt="logo"/&gt;
          &lt;img src="https://uspto.report/TM/86693240/mark" alt="logo"/&gt;
          &lt;/div&gt;
      &lt;button type="submit" onClick={signIn}&gt;
      Sign In
      &lt;/button&gt;
  
          
          &lt;/div&gt;
      )
  }
  
  export default Login;</code></pre>
  </div>
  </div>
  
  **</p>
  <p>Reducer.js
  ......................................................................................</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const initialState = {
      user: null,
  };
  
  export const actionTypes = {
      SET_USER: "SET_USER",
  };
  
  function reducer(state, action){
  console.log(action);
  switch(action.type){
      case actionTypes.SET_USER:
          return {
              ...state,
              user:action.user,
          };
  
          default: 
              return state;
  }
  };
  
  export default reducer;</code></pre>
  </div>
  </div>
  </p>
  <p>state provider
  ...................................................................
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { createContext, useContext, useReducer} from 'react';
  
  
  export const StateContext = createContext();
  
  
  export const StateProvider = ({reducer, initialState, children}) =&gt; (
  
      &lt;StateContext.Provider value = {useReducer(reducer, initialState)}&gt;
          {children}
      &lt;/StateContext.Provider&gt; 
  
  );
  
  export const useStateValue = () =&gt; useContext(StateContext);</code></pre>
  </div>
  </div>
  </p>