React-Redux 应用中实现用户数据的条件加载

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

export const loadUser = () => async (dispatch, getState) => {
    // 在尝试加载用户之前，检查用户是否已认证
    // 假设 Redux 状态中有一个 auth.isAuthenticated 字段
    if (!getState().auth.isAuthenticated) {
        // 如果用户未认证，则直接返回，不执行后续的 API 请求
        // 这样可以避免在未登录状态下发起不必要的 /api/profile 请求
        return;
    }

    try {
        dispatch({ type: 'LOAD_USER_REQ' });

        // 注意：根据您的代理配置，API 路径可能是 '/api/profile'
        const { data } = await axios.get('/api/profile'); 

        dispatch({
            type: 'LOAD_USER_SUCCESS',
            payload: data.user
        });

    } catch (error) {
        // 即使进行了预检查，API 请求仍可能因其他原因失败（如 token 过期），
        // 此时应处理错误，并将认证状态设为 false。
        dispatch({
            type: 'LOAD_USER_FAIL',
            payload: error.response && error.response.data.message
                ? error.response.data.message
                : error.message
        });
    }
};

export const clearErrors = () => async dispatch => {
    dispatch({ type: 'CLEAR_ERRORS' });
};

// reducers/user.js
const initialState = {
    user: null, // 初始用户数据设为 null
    isAuthenticated: false, // 初始认证状态为 false
    loading: false,
    error: null
};

export const authReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'LOAD_USER_REQ':
            return {
                ...state,
                loading: true,
                error: null
            };

        case 'LOAD_USER_SUCCESS':
            return {
                ...state,
                loading: false,
                isAuthenticated: true,
                user: action.payload,
                error: null
            };

        case 'LOAD_USER_FAIL':
            return {
                ...state,
                loading: false,
                isAuthenticated: false, // 加载失败，视为未认证
                user: null, // 清空用户数据
                error: action.payload
            };

        // 假设您有登录/注册/登出相关的 action
        // case 'LOGIN_SUCCESS':
        // case 'REGISTER_SUCCESS':
        //     return { ...state, loading: false, isAuthenticated: true, user: action.payload, error: null };
        // case 'LOGOUT_SUCCESS':
        //     return { ...state, loading: false, isAuthenticated: false, user: null, error: null };

        case 'CLEAR_ERRORS':
            return {
                ...state,
                error: null
            };

        default:
            return state;
    }
};

// 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('');
    // 从 Redux store 中获取认证状态
    const { isAuthenticated } = useSelector(state => state.auth); 

    useEffect(() => {
        // 无论用户是否认证，都尝试 dispatch loadUser。
        // loadUser thunk 内部会根据 isAuthenticated 状态决定是否发起 API 请求。
        store.dispatch(loadUser());

        // 只有当用户已认证时才请求 Stripe API Key
        if (isAuthenticated) {
            (async () => {
                try {
                    const { data } = await axios.get('/api/stripeapikey');
                    setStripeApiKey(data.stripeApiKey);
                } catch (error) {
                    console.error('Failed to load Stripe API Key:', error);
                    // 可以在此添加错误处理，例如 dispatch 一个 action 来更新 Redux 状态
                }
            })();
        } else {
            // 如果用户未认证，确保清空或重置 stripeApiKey
            setStripeApiKey('');
        }

    }, [isAuthenticated]); // 依赖 isAuthenticated，当认证状态改变时重新运行此 effect

    return (
        <Router>
            <div className="App">
                <Header />
                <Routes>
                    <Route path="/" element={<Home />} />
                    {/* 这些路由可能需要额外的路由保护