title: React context api with useReducer state not changing
body: <p>I have an Auth screen and a HomeScreen, and to manage the state I am using Context API in which I have 2 states -&gt; 1) <code>user</code> state on which I'm deciding whether I am authenticated or not (while fetching info from the server), 2) <code>loading</code> state to show a loading screen when all this is happening. The problem is, everything is working, even setting the state of <code>user</code> from null to a well defined object coming from my API, and in the same way I'm changing my <code>loading</code> state but it is not changing, it is <code>false</code> everytime despite I'm dispatching using the same method.</p>
  <p>Context file:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { createContext, useContext, useReducer } from 'react';
  import {UserReducer} from './reducers';
  
  const initialState = {
    user: null,
    loading: false,
  };
  
  const UserContext = createContext(initialState);
  
  export const UserProvider = ({children}) =&gt; {
    const [globalState, dispatch] = useReducer(UserReducer, initialState);
  
    return (
      &lt;UserContext.Provider value={{
        user: globalState.user,
        loading: globalState.loading,
        dispatch,
      }} &gt;
        {children}
      &lt;/UserContext.Provider&gt;
    );
  };
  
  export default function() {
    return useContext(UserContext);
  }
  </code></pre>
  <p>Actions:</p>
  <pre class="lang-js prettyprint-override"><code>export const SET_USER_DETAILS = (userDetails) =&gt; {
    return {
        type: 'SET_USER_DETAILS',
        payload: userDetails,
    };
  };
  
  export const SET_LOADING = (loadingState) =&gt; {
    return {
      type: 'SET_LOADING',
      payload: loadingState,
    };
  };
  </code></pre>
  <p>Reducer:</p>
  <pre class="lang-js prettyprint-override"><code>export const UserReducer = (state, action) =&gt; {
    switch (action.type) {
      case 'SET_USER_DETAILS':
        return {
          ...state,
          user: action.payload,
        };
      case 'SET_LOADING':
        return {
          ...state,
          loading: action.payload,
        };
      default:
        return state;
    }
  };
  </code></pre>
  <p>Main Navigation File:</p>
  <pre class="lang-js prettyprint-override"><code>const Navigation = () =&gt; {
    const {user, dispatch, loading} = useAuth();
    console.log(user); // after successful fetch from api, I'm getting the desired user data.
    console.log(loading); //  PROBLEM =&gt; always false.
  
    useEffect(() =&gt; {
      checkUserLoggedInStatus(dispatch);
    }, [dispatch]);
  
    return loading ? (
      &lt;LoadingScreen /&gt;
    ) : !user ? (
      &lt;Stack.Navigator screenOptions={{headerShown: false}}&gt;
        &lt;Stack.Screen name=&quot;Login&quot; component={LoginScreen} /&gt;
        &lt;Stack.Screen name=&quot;Register&quot; component={RegisterScreen} /&gt;
        &lt;Stack.Screen name=&quot;Verify&quot; component={OTPVerificationScreen} /&gt;
      &lt;/Stack.Navigator&gt;
    ) : (
      &lt;Stack.Navigator&gt;
        &lt;Stack.Screen name=&quot;Home&quot; component={HomeScreen} /&gt;
        &lt;Stack.Screen name=&quot;Message&quot; component={MessageScreen} /&gt;
      &lt;/Stack.Navigator&gt;
    );
  };
  </code></pre>
  <p>The <code>checkUserLoggedInStatus</code> function:</p>
  <pre class="lang-js prettyprint-override"><code>export const checkUserLoggedInStatus = (dispatch) =&gt; {
    dispatch(SET_LOADING(true)); // NOT WORKING/NOT CHANGING THE LOADING STATE
    AsyncStorage.getItem('token')
    .then((token) =&gt; {
      if (token) {
        fetch(`${API_URL}/user/`, {
          method: 'GET',
          headers: {
            ...
          },
        })
        .then(response =&gt; response.json())
        .then((data) =&gt; {
          if (data.type === 'success') {
            const details = data.data.user;
            dispatch(SET_USER_DETAILS(details)); // THIS IS WORKING FINE.
          }
        })
        .catch((error) =&gt; {
          console.log(error.message);
        });
      }
    })
    .catch((error) =&gt; {
      console.log(error.message);
    });
    dispatch(SET_LOADING(false)); // NOT WORKING/NOT CHANGING THE LOADING STATE
  };
  </code></pre>
  <p>I cannot understand what I am doing wrong because I am doing the same thing with <code>SET_USER_DETAILS</code> action/reducer function but I don't know what's wrong with the <code>loading</code> state.</p>
  <p>SUMMARY: Not able to render <code>LoadingScreen</code> based on <code>loading</code> state from <code>UserContext</code>.</p>
  <p>If anyone could help me, I would really appreciate it!</p>
  <p>Thank you!</p>