React.js全局变量传递咨询：购物车站点组件数据同步及Redux丢数问题

一、关于组件读取用户数据：别每个组件都写componentDidMount！ #

你现在的做法会导致大量重复代码，后期维护起来特别麻烦。推荐这两种更优雅的方式：

1. 使用React Context全局共享数据 #

创建一个用户数据的Context，在根组件里统一读取localStorage的用户信息，然后通过Provider把数据传递给所有子组件。需要使用数据的组件直接通过useContext（函数组件）或者Consumer（类组件）获取即可，不用每个组件都写读取逻辑。

示例代码：

// UserContext.js
import React, { createContext, useContext, useEffect, useState } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // 根组件统一读取localStorage
    const savedUser = localStorage.getItem('userData');
    if (savedUser) {
      setUserData(JSON.parse(savedUser));
    }
  }, []);

  return (
    <UserContext.Provider value={{ userData, setUserData }}>
      {children}
    </UserContext.Provider>
  );
};

// 自定义hooks方便组件调用
export const useUser = () => useContext(UserContext);

然后在根组件包裹：

// App.js
import { UserProvider } from './UserContext';

function App() {
  return (
    <UserProvider>
      {/* 你的所有组件 */}
    </UserProvider>
  );
}

组件里使用：

// 函数组件
import { useUser } from './UserContext';

function Cart() {
  const { userData } = useUser();
  // 直接使用userData即可
}

2. 结合Redux统一管理（推荐，看第二个问题的解决方案） #

如果用Redux持久化状态，组件直接从Redux store获取用户数据，完全不用碰localStorage，更省心。

二、Redux页面刷新数据丢失：状态持久化方案 #

这个问题的核心是把Redux的状态同步到本地存储（localStorage/sessionStorage），刷新时再从本地存储恢复状态。推荐两种方案：

1. 手动同步（适合简单场景） #

在Redux的reducer里做两件事：

• 初始化状态时，优先从localStorage读取，没有则用默认值
• 当用户数据更新时，把新状态写入localStorage

示例代码：

// userReducer.js
const DEFAULT_USER_DATA = {
  id: null,
  name: '',
  avatar: ''
};

const userReducer = (state = JSON.parse(localStorage.getItem('userData')) || DEFAULT_USER_DATA, action) => {
  switch (action.type) {
    case 'SET_USER':
      const newState = { ...state, ...action.payload };
      // 更新状态后写入localStorage
      localStorage.setItem('userData', JSON.stringify(newState));
      return newState;
    default:
      return state;
  }
};

这种方式适合状态结构简单的情况，但如果状态复杂，手动写存储逻辑容易遗漏。

2. 使用redux-persist（推荐，适合复杂场景） #

这是专门为Redux做状态持久化的库，能自动帮你完成状态的存储和恢复，支持配置哪些模块需要持久化，非常方便。

步骤：

1. 安装依赖：

npm install redux-persist
# 或者yarn
yarn add redux-persist

2. 配置Redux store：

// store.js
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage

// 持久化配置
const persistConfig = {
  key: 'root', // 存储的键名
  storage, // 存储引擎（这里用localStorage）
  whitelist: ['user'] // 只持久化user模块的状态，其他模块不存
};

// 导入你的根reducer
import rootReducer from './reducers';

// 用persistReducer包装根reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建store和persistor
export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

3. 在根组件用PersistGate包裹：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    {/* PersistGate会等待状态恢复完成后再渲染App */}
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

这样配置后，你的Redux状态会自动同步到localStorage，页面刷新时会自动读取恢复，完全不用手动写存储逻辑。

总结一下：如果你的项目已经在用Redux，直接用redux-persist解决状态丢失问题，同时组件直接从Redux获取用户数据，不用每个组件读localStorage；如果没用到Redux，用React Context来统一管理用户数据，减少重复代码。

内容的提问来源于stack exchange，提问作者S.M_Emamian