// FE-OP002: 前端状态管理优化 import { createStore, combineReducers, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { createLogger } from 'redux-logger'; // 定义状态类型 interface AppState { user: UserState; products: ProductState; orders: OrderState; loading: boolean; error: string | null; } interface UserState { isLoggedIn: boolean; userInfo: any; token: string | null; } interface ProductState { list: any[]; selected: any | null; loading: boolean; } interface OrderState { list: any[]; selected: any | null; loading: boolean; } // 定义初始状态 const initialState: AppState = { user: { isLoggedIn: false, userInfo: null, token: null, }, products: { list: [], selected: null, loading: false, }, orders: { list: [], selected: null, loading: false, }, loading: false, error: null, }; // 定义action类型 const SET_LOADING = 'SET_LOADING'; const SET_ERROR = 'SET_ERROR'; const CLEAR_ERROR = 'CLEAR_ERROR'; // User actions const SET_USER = 'SET_USER'; const LOGOUT = 'LOGOUT'; // Product actions const SET_PRODUCTS = 'SET_PRODUCTS'; const SET_SELECTED_PRODUCT = 'SET_SELECTED_PRODUCT'; const SET_PRODUCTS_LOADING = 'SET_PRODUCTS_LOADING'; // Order actions const SET_ORDERS = 'SET_ORDERS'; const SET_SELECTED_ORDER = 'SET_SELECTED_ORDER'; const SET_ORDERS_LOADING = 'SET_ORDERS_LOADING'; // Action creators export const setLoading = (loading: boolean) => ({ type: SET_LOADING, payload: loading }); export const setError = (error: string) => ({ type: SET_ERROR, payload: error }); export const clearError = () => ({ type: CLEAR_ERROR }); // User action creators export const setUser = (userInfo: any, token: string) => ({ type: SET_USER, payload: { userInfo, token } }); export const logout = () => ({ type: LOGOUT }); // Product action creators export const setProducts = (products: any[]) => ({ type: SET_PRODUCTS, payload: products }); export const setSelectedProduct = (product: any | null) => ({ type: SET_SELECTED_PRODUCT, payload: product }); export const setProductsLoading = (loading: boolean) => ({ type: SET_PRODUCTS_LOADING, payload: loading }); // Order action creators export const setOrders = (orders: any[]) => ({ type: SET_ORDERS, payload: orders }); export const setSelectedOrder = (order: any | null) => ({ type: SET_SELECTED_ORDER, payload: order }); export const setOrdersLoading = (loading: boolean) => ({ type: SET_ORDERS_LOADING, payload: loading }); // Reducers const userReducer = (state = initialState.user, action: any) => { switch (action.type) { case SET_USER: return { ...state, isLoggedIn: true, userInfo: action.payload.userInfo, token: action.payload.token, }; case LOGOUT: return initialState.user; default: return state; } }; const productsReducer = (state = initialState.products, action: any) => { switch (action.type) { case SET_PRODUCTS: return { ...state, list: action.payload, }; case SET_SELECTED_PRODUCT: return { ...state, selected: action.payload, }; case SET_PRODUCTS_LOADING: return { ...state, loading: action.payload, }; default: return state; } }; const ordersReducer = (state = initialState.orders, action: any) => { switch (action.type) { case SET_ORDERS: return { ...state, list: action.payload, }; case SET_SELECTED_ORDER: return { ...state, selected: action.payload, }; case SET_ORDERS_LOADING: return { ...state, loading: action.payload, }; default: return state; } }; const appReducer = (state = initialState, action: any) => { switch (action.type) { case SET_LOADING: return { ...state, loading: action.payload, }; case SET_ERROR: return { ...state, error: action.payload, }; case CLEAR_ERROR: return { ...state, error: null, }; default: return state; } }; // 组合reducers const rootReducer = combineReducers({ user: userReducer, products: productsReducer, orders: ordersReducer, app: appReducer, }); // 中间件 const middleware = [thunk]; // 开发环境添加logger if (process.env.NODE_ENV === 'development') { const logger = createLogger(); middleware.push(logger); } // 创建store const store = createStore(rootReducer, applyMiddleware(...middleware)); export type RootState = ReturnType; export default store;