React and Redux: How to Access Another State Of a Reducer Within Another Reducer

Viewed 46

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.

//User Reducer file

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;
  }
}

//Supplier List Reducer File

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;
  }
}
0 Answers
Related