优化React-Redux应用中的用户和API密钥按需加载

// App.js 简化版
import { useEffect, useState } from 'react';
import axios from 'axios';
import { loadUser } from './actions/user';
import store from './store';

export default function App() {
  const [stripeApiKey, setStripeApiKey] = useState('');

  useEffect(() => {
    // 无论用户是否登录，都会尝试加载用户
    store.dispatch(loadUser());

    // 无论用户是否登录，都会尝试获取Stripe API Key
    (async () => {
      const { data } = await axios.get('/api/stripeapikey');
      setStripeApiKey(data.stripeApiKey);
    })().catch(console.error);
  }, []);

  // ... 渲染逻辑
}

// actions/user.js 简化版
import axios from 'axios';

export const loadUser = () => async dispatch => {
    try {
        dispatch({ type: 'LOAD_USER_REQ' });
        const { data } = await axios.get('/api/profile'); // 未登录时此处会401
        dispatch({
            type: 'LOAD_USER_SUCCESS',
            payload: data.user
        });
    } catch (error) {
        dispatch({
            type: 'LOAD_USER_FAIL',
            payload: error.response.data.message
        });
    }
};

// reducers/user.js
export const authReducer = (state = { user: {}, isAuthenticated: false }, action) => {
    switch (action.type) {
        case 'LOAD_USER_REQ':
            return {
                loading: true,
                isAuthenticated: false // 请求开始时设置为false
            };
        case 'LOAD_USER_SUCCESS':
            return {
                ...state,
                loading: false,
                isAuthenticated: true, // 用户加载成功，设置为true
                user: action.payload
            };
        case 'LOAD_USER_FAIL':
            return {
                loading: false,
                isAuthenticated: false, // 用户加载失败，设置为false
                user: null,
                error: action.payload
            };
        case 'CLEAR_ERRORS':
            return {
                ...state,
                error: null
            };
        default:
            return state;
    }
};

// actions/user.js
import axios from 'axios';

export const loadUser = () => async (dispatch, getState) => {
    // 如果用户未认证，则直接返回，不执行API请求
    if (!getState().auth.isAuthenticated) {
        console.log('用户未认证，跳过加载用户数据。');
        // 可以选择性地派发一个表示用户未登录的action，例如 'USER_NOT_AUTHENTICATED'
        // dispatch({ type: 'USER_NOT_AUTHENTICATED' });
        return;
    }

    try {
        dispatch({ type: 'LOAD_USER_REQ' });
        const { data } = await axios.get('/api/profile');
        dispatch({
            type: 'LOAD_USER_SUCCESS',
            payload: data.user
        });
    } catch (error) {
        // 即使有认证状态，请求也可能失败（例如token过期），此时应更新认证状态
        dispatch({
            type: 'LOAD_USER_FAIL',
            payload: error.response.data.message
        });
        // 确保在认证失败时将 isAuthenticated 设置为 false
        // 这已经在 reducer 中处理了 LOAD_USER_FAIL
    }
};

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';
import { useSelector } from 'react-redux'; // 引入 useSelector

import Header from './components/Header';
import Home from './components/Home';
import Payment from './components/Payment';
import Profile from './components/Profile';

import { loadUser } from './actions/user';
import store from './store';

export default function App() {
  const [stripeApiKey, setStripeApiKey] = useState('');
  const { isAuthenticated } = useSelector(state => state.auth); // 从Redux获取认证状态

  useEffect(() => {
    // 无论用户是否登录，都尝试调度 loadUser。
    // loadUser 内部会根据 isAuthenticated 状态决定是否实际执行API请求。
    store.dispatch(loadUser());
  }, []); // 仅在组件挂载时调度一次

  useEffect(() => {
    // 仅当用户已认证时才尝试获取 Stripe API Key
    if (isAuthenticated) {
      console.log('用户已认证，尝试获取Stripe API Key。');
      (async () => {
        try {
          const { data } = await axios.get('/api/stripeapikey');
          setStripeApiKey(data.stripeApiKey);
        } catch (error) {
          console.error('获取Stripe API Key失败:', error);
          // 可以根据错误类型处理，例如如果是401，则可能需要登出用户
        }
      })();
    } else {
        console.log('用户未认证，跳过获取Stripe API Key。');
        setStripeApiKey(''); // 清除旧的key，确保未登录状态下不使用
    }
  }, [isAuthenticated]); // 依赖 isAuthenticated 状态

  return (
    <Router>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          {/* 这些路由通常需要保护，确保只有认证用户才能访问 */}
          <Route path="profile" element={<Profile />} />
          {stripeApiKey && isAuthenticated && // 只有当有API Key且用户已认证时才渲染支付路由
            <Route path="payment"
              element={<Elements stripe={loadStripe(stripeApiKey)}><Payment /></Elements>}
            />
          }
        </Routes>
      </div>
    </Router>
  );
}