title: Restore previous state in context API
body: <p>I am using contextAPI for state management in react app. My Reducer.js has all the intialState stored.</p>
  <p>Everytime I refresh the page initialState is set to default value and I loose my current state.
  Is there a way to restore entire initialState as it was before page refresh.</p>
  <p>Below is the code for your reference.</p>
  <p>Index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import { StateProvider } from './components/context-api/StateProvider';
  import reducer, { initialState } from './components/context-api/Reducer';
  
  ReactDOM.render(
    &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>
  <p>Reducer.js</p>
  <pre><code>export const initialState = {
      name: &quot;&quot;,
      address: &quot;&quot;,
      graduated: false,
      language: []
  }
  
  const reducer = (state, action) =&gt; {
      switch (action.type) {
          case &quot;UPDATE_INFO&quot;:
              return {
                  ...state,
                  name: action.name,
                  address: action.address,
                  graduated: action.graduated,
                  language: action.language,
              }
          default:
              return state;
      }
  }
  export default reducer;
  </code></pre>
  <p>StateProvider.js</p>
  <pre><code>import React, { createContext, useReducer, useContext } from &quot;react&quot;;
  
  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>
  <p>App.js</p>
  <pre><code>import React from 'react'
  import { useStateValue } from './components/context-api/StateProvider';
  
  
  function App() {
  
      const [{ name, address, graduated, language }, dispatch] = useStateValue();
  
      const updateState = () =&gt; {
  
          dispatch({
              type: &quot;UPDATE_INFO&quot;,
              name: &quot;Test 1&quot;,
              address: &quot;Chicago&quot;,
              graduated: true,
              language: [&quot;Java&quot;, &quot;JavaScript&quot;]
          })
      }
  
      return (
          &lt;div&gt;
              &lt;div&gt;You Info&lt;/div&gt;
              &lt;p&gt;name: {name}&lt;/p&gt;
              &lt;p&gt;address:{address}&lt;/p&gt;
              &lt;p&gt;graduated:{graduated}&lt;/p&gt;
              &lt;p&gt;skills:{language}&lt;/p&gt;
              &lt;button onClick={updateState}&gt;&lt;/button&gt;
          &lt;/div&gt;
      )
  }
  
  export default App
  
  </code></pre>
  <p>I tried using localStorage and sessionStorgae and was able to store the value. But I was not able to restore the state in Reducers.js from session/localStorage.</p>
  <p>How can I persist the initialState with value below on refresh.</p>
  <pre><code>            name: &quot;Test 1&quot;,
              address: &quot;Chicago&quot;,
              graduated: true,
              language: [&quot;Java&quot;, &quot;JavaScript&quot;]
  </code></pre>