使用create-react-app搭建dva项目（二）

---

前言

上篇文章写到安装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合法与否等。