title: React and Redux: How to Access Another State Of a Reducer Within Another Reducer
body: <p>In my application, a supplier has other suppliers in their network. On the frontend, when a supplier logs in, they can see the list of other suppliers in their network. Along with displaying the list of suppliers, I also wanted to display whether they are online or offline. How can I access user reducer file in which it has the isOnline state from supplier reducer file to see who is online and offline? I thought of adding a is_online field in the MySQL database so every time the supplier logs in it updates to 1. However, I feel that there has to be a better approach to this using states within reducers.</p>
  <p>//User Reducer file</p>
  <pre><code>const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: false,
    isLoading: false,
    user: null,
    isOnline: false
  };
  
  
  export default function(state = initialState, action){
    switch(action.type){
      case USER_AUTHENTICATED:
        return{
          ...state,
          isAuthenticated: true,
          isLoading: false,
          isOnline: true
        };
      case USER_LOADED:
        return{
          ...state,
          isAuthenticated: true,
          isLoading: false,
          user: action.payload
          isOnline: true
        };
      case LOGIN_SUCCESS:
      localStorage.setItem('token', action.payload.token);
      const {token,...user} = action.payload;
      return{
        ...state,
        token: token,
        user: user,
        isAuthenticated: true,
        isLoading: false,
        isOnline: true
      };
      case LOGOUT_SUCCESS:
      localStorage.removeItem('token');
        return{
          ...state,
          token: null,
          isAuthenticated: false,
          isLoading: false,
          user: null,
          isOnline: false
        };
  
      default:
        return state;
    }
  }
  </code></pre>
  <p>//Supplier List Reducer File</p>
  <pre><code>const initialState = {
    supplierList: [],
    isLoading: false
  };
  
  export default function(state = initialState, action){
    switch(action.type){
      case LOADING_DATA:
      case LOGIN_SUCCESS:
        return{
          ...state,
          isLoading: true
        };
      case GET_SUPPLIER_LIST:
        return{
          ...state,
          supplierList: action.payload,
          isLoading: false
        };
      default:
        return state;
    }
  }
  </code></pre>