refactor(types): 重构类型系统,统一共享类型定义
feat(types): 新增共享类型中心,包含用户、产品、订单等核心领域类型 fix(types): 修复类型定义错误,统一各模块类型引用 style(types): 优化类型文件格式和注释 docs(types): 更新类型文档和变更日志 test(types): 添加类型测试用例 build(types): 配置类型共享路径 chore(types): 清理重复类型定义文件
This commit is contained in:
@@ -1,37 +1,37 @@
|
||||
// FE-OP002: 前端状态管理优化
|
||||
import { createStore, combineReducers, applyMiddleware } from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
import { createLogger } from 'redux-logger';
|
||||
// 使用umi的model格式
|
||||
|
||||
// 定义状态类型
|
||||
interface AppState {
|
||||
user: UserState;
|
||||
products: ProductState;
|
||||
orders: OrderState;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
interface UserState {
|
||||
export interface UserState {
|
||||
isLoggedIn: boolean;
|
||||
userInfo: any;
|
||||
token: string | null;
|
||||
}
|
||||
|
||||
interface ProductState {
|
||||
export interface ProductState {
|
||||
list: any[];
|
||||
selected: any | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
interface OrderState {
|
||||
export interface OrderState {
|
||||
list: any[];
|
||||
selected: any | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
// 定义初始状态
|
||||
const initialState: AppState = {
|
||||
export interface AppState {
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
interface State {
|
||||
user: UserState;
|
||||
products: ProductState;
|
||||
orders: OrderState;
|
||||
app: AppState;
|
||||
}
|
||||
|
||||
const initialState: State = {
|
||||
user: {
|
||||
isLoggedIn: false,
|
||||
userInfo: null,
|
||||
@@ -47,150 +47,125 @@ const initialState: AppState = {
|
||||
selected: null,
|
||||
loading: false,
|
||||
},
|
||||
loading: false,
|
||||
error: null,
|
||||
app: {
|
||||
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:
|
||||
export default {
|
||||
namespace: 'global',
|
||||
state: initialState,
|
||||
reducers: {
|
||||
// User reducers
|
||||
setUser(state: State, { payload }: { payload: { userInfo: any; token: string } }) {
|
||||
return {
|
||||
...state,
|
||||
isLoggedIn: true,
|
||||
userInfo: action.payload.userInfo,
|
||||
token: action.payload.token,
|
||||
user: {
|
||||
isLoggedIn: true,
|
||||
userInfo: payload.userInfo,
|
||||
token: payload.token,
|
||||
},
|
||||
};
|
||||
case LOGOUT:
|
||||
return initialState.user;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
},
|
||||
logout(state: State) {
|
||||
return {
|
||||
...state,
|
||||
user: initialState.user,
|
||||
};
|
||||
},
|
||||
|
||||
// Product reducers
|
||||
setProducts(state: State, { payload }: { payload: any[] }) {
|
||||
return {
|
||||
...state,
|
||||
products: {
|
||||
...state.products,
|
||||
list: payload,
|
||||
},
|
||||
};
|
||||
},
|
||||
setSelectedProduct(state: State, { payload }: { payload: any | null }) {
|
||||
return {
|
||||
...state,
|
||||
products: {
|
||||
...state.products,
|
||||
selected: payload,
|
||||
},
|
||||
};
|
||||
},
|
||||
setProductsLoading(state: State, { payload }: { payload: boolean }) {
|
||||
return {
|
||||
...state,
|
||||
products: {
|
||||
...state.products,
|
||||
loading: payload,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
// Order reducers
|
||||
setOrders(state: State, { payload }: { payload: any[] }) {
|
||||
return {
|
||||
...state,
|
||||
orders: {
|
||||
...state.orders,
|
||||
list: payload,
|
||||
},
|
||||
};
|
||||
},
|
||||
setSelectedOrder(state: State, { payload }: { payload: any | null }) {
|
||||
return {
|
||||
...state,
|
||||
orders: {
|
||||
...state.orders,
|
||||
selected: payload,
|
||||
},
|
||||
};
|
||||
},
|
||||
setOrdersLoading(state: State, { payload }: { payload: boolean }) {
|
||||
return {
|
||||
...state,
|
||||
orders: {
|
||||
...state.orders,
|
||||
loading: payload,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
// App reducers
|
||||
setLoading(state: State, { payload }: { payload: boolean }) {
|
||||
return {
|
||||
...state,
|
||||
app: {
|
||||
...state.app,
|
||||
loading: payload,
|
||||
},
|
||||
};
|
||||
},
|
||||
setError(state: State, { payload }: { payload: string | null }) {
|
||||
return {
|
||||
...state,
|
||||
app: {
|
||||
...state.app,
|
||||
error: payload,
|
||||
},
|
||||
};
|
||||
},
|
||||
clearError(state: State) {
|
||||
return {
|
||||
...state,
|
||||
app: {
|
||||
...state.app,
|
||||
error: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
effects: {
|
||||
// 可以在这里添加异步操作
|
||||
},
|
||||
subscriptions: {
|
||||
// 可以在这里添加订阅
|
||||
},
|
||||
};
|
||||
|
||||
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<typeof rootReducer>;
|
||||
export default store;
|
||||
|
||||
Reference in New Issue
Block a user