title: How to properly store and retrieve data using react js context api? The code, I have is not working as expected
body: <p>I am learning react. I am trying to store user information after fetching the data from an api endpoint and store it in context. The problem is I have to execute the function in every webpage to access the information stored in it. I tried using <code>useEffect</code> in App.js to fetch the data and use it in header and sidebar, but then it works only in that file.</p>
  <p>I have routers since I have multiple pages in my website. Are there any problems with the code which restricts the data getting stored in context and how to properly do this with routers.</p>
  <p>These are the codes I have,</p>
  <p>reducer.js</p>
  <pre><code>export const initialState = {
  user: null,
  };
  
  export const actionTypes = {
      SET_USER: 'SET_USER',
  };
  
  const reducer = (state, action) =&gt; {
      // console.log(action);
      switch (action.type) {
          case actionTypes.SET_USER:
              return {
                  ...state,
                  user: action.user,
              };
  
          default:
              return state;
      }
  };
  
  
  export default reducer;
  </code></pre>
  <p>stateprovider.js</p>
  <pre><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>
  <p>Below is the function which I need to call in <code>useEffect</code> in every page, for user information to get displayed in header and sidebar.</p>
  <pre><code>const [state, dispatch] = useStateValue()
  
  const userInfo = async function userProfileInfo() {
      axiosInstance.get('accounts/data/view/').then((res) =&gt; {
          const currentUser = res.data;
          dispatch({
              type: actionTypes.SET_USER,
              user: currentUser,
          })
  
          })
  }
  
  useEffect(() =&gt; {
      userInfo()
  
  }, [])
  </code></pre>
  <p>index.js</p>
  <pre><code>const routing = (
      &lt;Router&gt;
          
              &lt;StateProvider initialState={initialState} reducer={reducer}&gt;
                         
                  &lt;div className=&quot;body&quot;&gt;
                      &lt;Switch&gt;
                          
                          &lt;Route exact path=&quot;/signup&quot; component={Signup} /&gt;
                          .
                          .
                          &lt;Route exact path=&quot;/&quot; component={App} /&gt;
                          &lt;Route exact path=&quot;/myprofile&quot; component={PostMyProfile} /&gt;
                          .
          &lt;/Switch&gt;
         &lt;/div&gt;
      &lt;/StateProvider&gt;
  
          
      &lt;/Router&gt;
  </code></pre>
  <p>header.js</p>
  <pre><code>const [state, dispatch] = useStateValue();
  console.log(state.user)
  
  &lt;div className=&quot;header__info&quot;&gt;
      &lt;Avatar src= {state.user?.display_pic} alt=&quot;&quot;/&gt;
      &lt;h4&gt;{state.user?.username}&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Is it necessary to call this function in every page? There should be a proper way to do this I suppose.</p>