前言
上篇文章写到安装dva和history之后修改项目src目录,本篇接着继续叙述剩下的操作。
一、router文件夹
- index.tsx
import { Router, Route, Switch } from "dva/router";
import dynamic from "dva/dynamic";
import { ConfigProvider } from "antd";
import "moment/locale/zh-cn";
import zhCN from "antd/es/locale/zh_CN";
import routes from "./routes";
const allRoutes = [...routes];
function RouterComponent({ history, app }) {
return (
<ConfigProvider locale={zhCN}>
<Router history={history}>
{allRoutes ? (
<Switch>
{allRoutes.map((route, index) => {
const { path, ...dynamics } = route;
return (
<Route
key={index}
path={path}
exact
component={dynamic({ app, ...dynamics } as any) as any}
/>
);
})}
</Switch>
) : null}
</Router>
</ConfigProvider>
);
}
export default RouterComponent;
- routes.tsx
import { BASE_PATH } from "@/globalConstants";
import { RouteType } from "./index.d";
const App = () => import("@/App");
const A = () => import("pages/A");
const Demo = () => import("pages/Demo");
const routes: RouteType = [
{
path: `${BASE_PATH}/app`,
exact: true,
models: () => [import("models/app")],
component: App,
},
{
path: `${BASE_PATH}/A`,
exact: true,
models: () => [import("models/a")],
component: A,
},
{
path: `${BASE_PATH}/Demo`,
exact: true,
models: () => [import("models/demo")],
component: Demo,
},
];
export default routes;
- index.d.ts
export interface RouteItem {
key?: string | number;
// component?: React.ComponentType<any>;
component?: any;
path: string;
name?: string;
exact?: boolean;
strict?: boolean;
routes?: RouteItem[];
redirect?: string;
authority?: string[];
models: any;
}
export type RouteType = RouteItem[];
二、pages文件夹
- A.tsx
import React from "react";
const A: React.FC = () => {
return <>This is pageA</>;
};
export default A;
三、models文件夹
- a.ts
import { getUserInfo } from "services/a";
import { IAState, IAModel } from "interfaces/a";
const initState: IAState = {
a: "a",
};
const aModel: IAModel = {
namespace: "a",
state: initState,
subscriptions: {},
effects: {
*getUserInfo({ payload }, { call, put }) {
const res = yield call(getUserInfo, payload);
const {
header: { code },
payload: data = [],
} = res;
if (code === 200) {
yield put({
type: "update",
payload: { userInfo: data },
});
}
},
},
reducers: {
update(state = initState, { payload }) {
return {
...state,
...payload,
};
},
},
};
export default aModel;
四、interfaces文件夹
- a.d.ts
import { Reducer } from "redux";
import { Model, Effect } from "@/interfaces";
export interface IAState {
a: string;
}
export interface IAModel extends Model {
namespace: string;
state: IAState;
subscriptions?: any;
effects: {
getUserInfo: Effect;
};
reducers: {
update: Reducer<IAState>;
};
onEffectsError?: (err: Error, extension: any) => void;
}
- index.d.ts
import { ReducersMapObject, Reducer } from "redux";
import { IGlobalState } from "interfaces/global.d.ts";
import { IAppState } from "interfaces/app.d.ts";
import { IDemoState } from "interfaces/demo.d.ts";
export interface ReducerEnhancer {
(reducer: Reducer<any>): void;
}
export interface Model {
namespace: string;
state?: any;
subscriptions?: any;
reducers?: ReducersMapObject | ReducersMapObjectWithEnhancer;
effects?: EffectsMapObject;
onEffectsError?: (err: Error, extension: any) => void;
}
export type Effect<P = any> = (
action: ActionType<P>,
effects: EffectsCommandMap
) => void;
export interface IConnectState {
global: IGlobalState;
app: IAppState;
demo: IDemoState;
}
其他
剩下的utils和services文件夹没有放出来,因为services里的request方法可自己去写,该怎么去请求还有判断token合法与否等。