How we can maintain the state of logged in and loggedout users and share that state to homepage in react redux

Question

Here after successfull login im directing to homepage. But how can show whether the user is logged in or loggedout in homepage.here i have attached my codesanbox link. https://codesandbox.io/s/inspiring-rain-olm7wx?file=/src/components/Home.component.jsx

import axios from 'axios';
export const loginAction = {
    login,
};
function login(user) {
    return (dispatch) => {
        var data = {
            email: user.email,
            password: user.password,
        };
        axios
            .post('https://reqres.in/api/login', data)
            .then((res) => {
                console.log("res", (res));
                alert("response " + JSON.stringify(res.data));
                dispatch(setUserLogin(res.data, false));
                localStorage.setItem("isLogin", true)
                window.location.pathname = "./";
            })
            .catch(err => {

                dispatch(setUserLoginError(err, true));
                alert("error" + err);

            });

    };
}

export function setUserLogin(token, showError) {
    return {
        type: 'SET_LOGIN_SUCCESS',
        token: token,
        isLoading: false,
        showError: showError,
    };
}

export function setUserLoginError(error, showError) {
    return {
        type: 'SET_LOGIN_ERROR',
        error: error,
        showError: showError,
    };
}

Answer 1

you are working with redux so following code will help you to confirm user logged in or logged out

import React from "react";
import { useSelector } from 'react-redux'

export default function Home() {
 
  // https://react-redux.js.org/api/hooks
  const isLogin = useSelector((state) => state.login.isLogin)
  console.log('isLogin ',isLogin);

  return (
    <>
      <div>This is homepage</div>
      <br />
      <a href="/login">
        <button> LOGIN</button>
      </a>
    </>
  );
}

Here useSelector hook available from react-redux which you already have in your project. And isLogin boolean value you can read from redux store if it is true means user logged in and it it is false means user not logged in.

You can set this isLogin from your login component using reducer.

Update 1

In your reducer I can see you have not set isLogin set it as following:

const initialState = {
    token: '',
    showError: false,
    error: '',
    isLogin: false,
    isLoading: false
};

export function login(state = initialState, action) {
    switch (action.type) {
        case 'SET_LOGIN_SUCCESS':
            return {
                ...state,
                token: action.token,
                isLogin: true,
                isLoading: action.isLoading,
                showError: action.showError,
            };
        case 'SET_LOGIN_ERROR':
            return {
                ...state,
                error: action.error,
                showError: action.showError,
                isLogin: false,
            };
        default:
            return state;
    }
}

Update 2

You are getting isLogin false in App.js because you of window.location.pathname = "./"; in loginAction.js It will reload the page and so isLogin will reset so remove it first.

Instead you can try following code in Login.jsx

import { useNavigate } from "react-router-dom";
import { useSelector } from 'react-redux'

function Login(props) {
  let navigate = useNavigate();

  const isLogin = useSelector((state) => state.login.isLogin)
  useEffect(()=>{
    if(isLogin){
      navigate('/')
    }
    
  },[isLogin])
}