React项目中Redux dispatch的数据无法在其他组件渲染如何解决

核心问题根因 #

问题核心是Redux状态未持久化+整页跳转导致内存状态丢失，具体问题点如下：

• 调用dispatch更新Redux状态后，使用window.location = '/home'触发了整页刷新，Redux状态默认存储在应用运行内存中，页面刷新后所有状态会重置为初始值，因此Home组件无法读取到刚存入的登录信息。
• store.js存在拼写错误，export dafault store应为export default store，会导致store实例引入异常。
• 类型不匹配隐患：loginReducer初始状态中loginDetails是数组类型，但接口返回的用户信息是对象类型，易引发后续解构报错。

修复步骤 #

1. 替换跳转方式，避免整页刷新 #

如果你使用React Router做路由管理，改用客户端路由跳转，不会触发页面刷新，可保留Redux内存状态：
修改Authenticate.js代码：

import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom'; // 新增导入路由跳转钩子
import { setLoginDetails } from 'redux/actions/loginActions';
import { useState, useEffect } from 'react';
import axios from 'axios'; // 补充缺失的请求库导入

function Authenticate() {
  const [data, setData] = useState([]);
  const dispatch = useDispatch();
  const navigate = useNavigate(); // 初始化跳转方法
  const loginDetails = useSelector((state) => state);
  
  const validateLogin = async() => {
    const response = await axios.get('/api')
    let responseValue = response.data.success
    if(responseValue === true) {
      let responseResp = JSON.parse(response.data.resp)
      dispatch(setLoginDetails(responseResp.data.user))
      // 替换整页刷新为客户端路由跳转
      navigate('/home')
    }
    else{
      // 错误处理逻辑
    }
  }
  useEffect(()=>{
    validateLogin();
  },[])
  return(
    <div>Authenticating....</div>
  )
}
export default Authenticate;

2. 修复store.js拼写错误 #

import { createStore } from 'redux'
import reducers from './index'
const store = createStore(
  reducers,
  {},
);
export default store; // 修复dafault拼写为default

3. 统一状态类型 #

修改loginReducer.js的初始状态，和接口返回的用户对象类型匹配：

import { ActionTypes } from '../constants/action-types';
const initialState = {
  loginDetails: {}, // 从数组改为空对象，匹配用户信息数据结构
}
export const loginReducer = (state = initialState, {type, payload}) => {
  switch(type){
    case ActionTypes.SET_LOGIN:
      return {...state, loginDetails: payload}
    default:
      return state;
  }
}

可选优化（支持刷新后保留登录状态） #

如果需要支持页面刷新后仍保留登录信息，可将登录数据持久化存储到localStorage：

1. dispatch更新状态的同时，将数据存入localStorage
2. 初始化reducer初始状态时，从localStorage读取数据作为初始值

内容的提问来源于stack exchange，提问作者JayDee