React：不使用Redux时如何存储全局数据？

Absolutely! Context API is perfect for this exact scenario—storing a single global user object without the overhead of Redux. Since you're new to React and building a simple app, this is the ideal lightweight solution. Let me break down how to implement it with clear, actionable examples.

Step 1: Create a User Context and Provider #

First, we'll create a dedicated context file to manage the user state and helper functions (like login/logout). This keeps your state logic organized and easy to maintain.

// src/contexts/UserContext.js
import { createContext, useState, useContext } from 'react';

// Initialize the context with a default null value (for when no user is logged in)
const UserContext = createContext(null);

// Provider component that wraps your app and holds the user state
export function UserProvider({ children }) {
  // Start with no user logged in (you could also load from localStorage here if needed)
  const [user, setUser] = useState(null);

  // Helper function to handle login (you can replace this with real API calls later)
  const login = (userData) => {
    setUser(userData);
    // Optional: Save user to localStorage to persist across page refreshes
    localStorage.setItem('user', JSON.stringify(userData));
  };

  // Helper function to handle logout
  const logout = () => {
    setUser(null);
    localStorage.removeItem('user');
  };

  // Pass the user state and functions to all child components via context
  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

// Custom hook to simplify accessing the context (avoids repetitive code across components)
export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used inside a UserProvider!');
  }
  return context;
}

Step 2: Wrap Your App with the Provider #

Next, wrap your root App component with the UserProvider so every component in your app can access the user state.

// src/App.js
import { UserProvider } from './contexts/UserContext';
import Home from './components/Home';
import Profile from './components/Profile';

function App() {
  return (
    <UserProvider>
      {/* All components nested here can access the user context */}
      <Home />
      <Profile />
    </UserProvider>
  );
}

export default App;

Step 3: Use the User Context in Components #

Now you can easily access and update the user state in any component using the useUser custom hook.

Example: Home Component (Login Flow) #

// src/components/Home.js
import { useUser } from '../contexts/UserContext';

function Home() {
  const { user, login } = useUser();

  const handleLogin = () => {
    // Simulate fetching user data from an API
    const mockUser = { id: 1, name: 'Stephanie', email: 'stephanie@example.com' };
    login(mockUser);
  };

  return (
    <div className="home">
      <h1>Welcome to My App</h1>
      {user ? (
        <p>Hi there, {user.name}! 🎉</p>
      ) : (
        <button onClick={handleLogin}>Log In</button>
      )}
    </div>
  );
}

export default Home;

Example: Profile Component (View/Logout) #

// src/components/Profile.js
import { useUser } from '../contexts/UserContext';

function Profile() {
  const { user, logout } = useUser();

  // If no user is logged in, show a prompt to log in
  if (!user) {
    return <p>Please log in to see your profile.</p>;
  }

  return (
    <div className="profile">
      <h2>Your Profile</h2>
      <p><strong>Name:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
      <button onClick={logout}>Log Out</button>
    </div>
  );
}

export default Profile;

Why This Is a Great Fit for Your Needs #

• No extra dependencies: Uses React's built-in hooks, so you don't need to install Redux or other third-party libraries.
• Minimal boilerplate: Way simpler than setting up Redux (no reducers, actions, or store configuration required).
• Scalable if you grow: If later you need to add more global state (like theme preferences), you can either extend this context or create separate ones—no need to refactor everything.
• Easy to maintain: All user-related logic lives in one place, making it simple to update or debug.

Quick Notes to Keep in Mind #

• Always ensure components using useUser are nested inside the UserProvider (the custom hook will throw an error if not, which helps you catch mistakes early).
• The localStorage persistence is optional but recommended for keeping users logged in after they refresh the page.
• If you ever need to add async logic (like actual API calls for login), you can update the login function to use async/await without changing the context structure.

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