状态管理

前端项目使用Redux Toolkit进行状态管理，提供可预测的状态更新机制。

Redux Toolkit配置

Store配置

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './features/user/userSlice';
import todoReducer from './features/todo/todoSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    todo: todoReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST'],
      },
    }),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Slice示例

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

interface UserState {
  id: string | null;
  name: string;
  email: string;
  isLoggedIn: boolean;
  loading: boolean;
}

const initialState: UserState = {
  id: null,
  name: '',
  email: '',
  isLoggedIn: false,
  loading: false,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    loginStart: (state) => {
      state.loading = true;
    },
    loginSuccess: (state, action: PayloadAction<{id: string, name: string, email: string}>) => {
      state.loading = false;
      state.isLoggedIn = true;
      state.id = action.payload.id;
      state.name = action.payload.name;
      state.email = action.payload.email;
    },
    loginFailure: (state) => {
      state.loading = false;
      state.isLoggedIn = false;
    },
    logout: (state) => {
      return initialState;
    },
  },
});

export const { loginStart, loginSuccess, loginFailure, logout } = userSlice.actions;
export default userSlice.reducer;

在组件中使用

使用useSelector和useDispatch

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '../store/store';
import { loginStart, logout } from '../store/features/user/userSlice';

const UserProfile: React.FC = () => {
  const user = useSelector((state: RootState) => state.user);
  const dispatch = useDispatch<AppDispatch>();

  const handleLogin = () => {
    dispatch(loginStart());
    // 异步登录逻辑...
  };

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div>
      {user.isLoggedIn ? (
        <div>
          <h2>欢迎, {user.name}!</h2>
          <button onClick={handleLogout}>退出登录</button>
        </div>
      ) : (
        <button onClick={handleLogin}>登录</button>
      )}
    </div>
  );
};

export default UserProfile;