React/Redux基础应用架构疑问：如何实现带注销按钮的组件结构？

Hey Samih, let's break this down step by step—building a clean, Redux-aligned architecture for your app suite's base structure is totally doable once you map out the pieces clearly. Let's start with the component hierarchy, then move into the Redux logic, and tie it all together.

The key here is to split components by responsibility, which aligns with React and Redux's core principles:

• App Main: The root container that wraps your entire application. Its only job is to render the toolbar and your app's main content—no direct logic for logout or auth.
• Application ToolBar: A reusable top-level bar that holds navigation, user info, and action buttons (like logout). It acts as a middle layer, passing down necessary hooks/props to child components.
• Logout Button: A small, single-purpose component that triggers the logout action. It only handles the click event and dispatches the Redux action—no state management here.

Example Component Code #

AppMain.jsx

import { ApplicationToolBar } from './ApplicationToolBar';
import { DashboardContent } from './DashboardContent'; // Replace with your app's main content

export function AppMain() {
  return (
    <div className="app-container">
      <ApplicationToolBar />
      <DashboardContent />
    </div>
  );
}

ApplicationToolBar.jsx

import { LogoutButton } from './LogoutButton';
import { UserAvatar } from './UserAvatar'; // Optional: Show logged-in user's avatar/name

export function ApplicationToolBar() {
  return (
    <header className="app-toolbar">
      <h2>My App Suite</h2>
      <div className="toolbar-right">
        <UserAvatar />
        <LogoutButton />
      </div>
    </header>
  );
}

We'll use Redux Toolkit (RTK)—the official, recommended way to write Redux code—it simplifies state management and handles immutable updates automatically.

Step 1: Create an Auth Slice #

This slice will manage user authentication state and the logout action (including optional API calls if your app requires server-side logout).

features/auth/authSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Optional: Async thunk for server-side logout
export const logoutFromServer = createAsyncThunk(
  'auth/logoutFromServer',
  async (_, { rejectWithValue }) => {
    try {
      const response = await fetch('/api/auth/logout', { method: 'POST' });
      if (!response.ok) throw new Error('Logout failed');
      return response.json();
    } catch (err) {
      return rejectWithValue(err.message);
    }
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: JSON.parse(localStorage.getItem('currentUser')) || null,
    status: 'idle',
    error: null
  },
  reducers: {
    // Basic client-side logout (clears local state/storage)
    logout: (state) => {
      state.user = null;
      localStorage.removeItem('currentUser');
    }
  },
  // Handle async server logout if using the thunk above
  extraReducers: (builder) => {
    builder
      .addCase(logoutFromServer.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(logoutFromServer.fulfilled, (state) => {
        state.status = 'succeeded';
        state.user = null;
        localStorage.removeItem('currentUser');
      })
      .addCase(logoutFromServer.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.payload;
      });
  }
});

export const { logout } = authSlice.actions;
export default authSlice.reducer;

Step 2: Configure the Redux Store #

Add the auth slice to your root store so it's accessible across your app.

app/store.js

import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../features/auth/authSlice';

export const store = configureStore({
  reducer: {
    auth: authReducer,
    // Add other reducers for your app suite here (e.g., settings, notifications)
  }
});

Step 3: Provide the Store to Your App #

Wrap your root component with Redux's Provider to make the store available to all components.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import { AppMain } from './AppMain';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <AppMain />
    </Provider>
  </React.StrictMode>
);

Update the Logout Button to use Redux hooks (useDispatch and useSelector) to trigger the logout action and conditionally render based on user state.

LogoutButton.jsx

import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom'; // Optional: For post-logout redirect
import { logout, logoutFromServer } from '../features/auth/authSlice';

export function LogoutButton() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { user, status } = useSelector((state) => state.auth);

  // Don't render the button if no user is logged in
  if (!user) return null;

  const handleLogout = async () => {
    // Use the async thunk if you need server-side logout:
    // try {
    //   await dispatch(logoutFromServer()).unwrap();
    //   navigate('/login');
    // } catch (err) {
    //   console.error('Logout failed:', err);
    // }

    // For client-only logout:
    dispatch(logout());
    navigate('/login'); // Redirect to login page after logout
  };

  return (
    <button 
      onClick={handleLogout} 
      disabled={status === 'loading'}
      className="logout-btn"
    >
      {status === 'loading' ? 'Logging out...' : `Logout (${user.username})`}
    </button>
  );
}

• Single Source of Truth: All auth state lives in the Redux store, making it easy to access across every app in your suite.
• Immutable Updates: RTK's createSlice handles immutable state updates automatically, so you don't have to write manual spread operations.
• Separation of Concerns: Components handle UI rendering and user interactions; Redux handles state logic and side effects (like API calls).
• Reusability: The Application ToolBar and Logout Button can be dropped into any app in your suite without modification, thanks to their decoupled design.

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