Can't render redux to other component reactjs

Question

I'm trying to use redux on my current project. However, I can't use the dispatch data to another component.

Here's my code:

Authenticate.js

import { useDispatch, useSelector } from 'react-redux';
import { setLoginDetails } from 'redux/actions/loginActions';

function Authenticate() {
  const [data, setData] = useState([]);
  const dispatch = useDispatch();
  const loginDetails = useSelector((state) => state);
  
  const validateLogin = async() => {
    const response = await.get('/api')
    let responseValue = response.data.success
    if(responseValue === true) {
      let responseResp = JSON.parse(response.data.resp)
      dispatch(setLoginDetails(responseResp.data.user))
      /** here's the console logs
   console.log('responseResp',responseResp)
console.log('AuthenticationOAK/responseResp.data.',responseResp.data)
console.log('AuthenticationOAK/responseResp.data.user',responseResp.data.user)
      */
      window.location = '/home'
    }
    else{
      //error 
    }
  }
  useEffect(()=>{
    validateLogin();
  },[])
return(
  <div>Authenticating....</div>
)
}
export default Authenticate;

loginAction.js

import { ActionTypes } from '../constants/action-types';
export const setLoginDetails = (loginDetails) => {
  return {
    type: ActionTypes.SET_LOGIN,
    payload: loginDetails,
  }
}

action-types.js

export const ActionTypes = {
  SET_LOGIN: 'SET_LOGIN',
}

loginReducer.js

import { ActionTypes } from '../constants/action-types';
const initialState = {
  loginDetails: [],
}
export const loginReducer = (state = initialState, {type, payload}) => {
  console.log('loginReducer/state', state)
  console.log('loginReducer/payload',payload)
  console.log('loginReducer/type', type)
  console.log('loginReducer/initialState',initialState)
  switch(type){
    case ActionTypes.SET_LOGIN:
      return {...state, loginDetails: payload}
    default:
      return state;
  }
}

Home.js

import { useSelector } from 'react-redux';

function Home(){
  const loginDetails = useSelector((state) => state.allLoginDetails.loginDetails)
  const { email, userName, firstName } = loginDetails;
  return(
    <h1>username {userName}</h1>
  )
  
}
export default Home;

index.js /redux/reducers/index.js

import { combineReducers } from 'redux'
import { loginReducer } from './loginReducer'
const reducers = combineReducers({
  allLoginDetails: loginReducer,
});
export default reducers;

store.js

import { createStore } from 'redux'
import reducers from './index'
const store = createStore(
  reducers,
  {},
);
export dafault store;

Index.js

import React from 'react'
import { render } from 'react-dom'
import App from './App'
import {createStore} from 'redux'
import { Provider } from 'react-redux'
import store from '../src/redux/reducers/store'
render(
  <Provider store={store}>
    <App />
  </Provider>,
document.getElementById('root'));

Below are the result of console logs from Authenticate.js

screenshots of console log from loginReducer.js

Hoping that you can help me with this, I'm having a hard time on this. Tried to use hard coded value on initialState and it's rendering properly. But when I use dynamic data it's not rendering. Thank you in advance. Stay safe!

Answer 1

in this file: Authenticate.js

useEffect(()=>{
    Authenticate(); // it must be validateLogin()?
  },[])