無法將 redux 渲染到其他組件 reactjs

Question

我正在嘗試在我當前的項目中使用 redux。 但是，我不能將調度數據用於另一個組件。

這是我的代碼：

驗證.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,
  }
}

動作類型.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;
  }
}

主頁.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;

索引.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'));

下面是來自Authenticate.js的控制台日志的結果

loginReducer.js的控制台日志截圖

希望你能幫助我解決這個問題，我很難做到這一點。 嘗試在initialState上使用硬編碼值並且它正在正確呈現。 但是當我使用動態數據時，它不會呈現。 先感謝您。 注意安全！

Answer 1

在這個文件中：Authenticate.js

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