index.js is the entry file for the entire project.

// 1. Initialize
const app = dva({
  history: createHistory(),
});

// 2. Plugins
app.use(createLoading());

// 3. Register global model
app.model(require('./models/global').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

export default app._store; // eslint-disable-line

Find / src/common/menu.js for menu configuration.

Routing is configured in routerConfig of / src/common/router.js, where the first parameter is an instance of DvaInstance defined in the index.js file; the second parameter is the corresponding model of the page, where the data is stored; and the third parameter is a function that returns the corresponding page.

'/': {
      component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
    },

dynamicWrapper:

// wrapper of dynamic
const dynamicWrapper = (app, models, component) => {
  // register models
  models.forEach(model => {
    if (modelNotExisted(app, model)) {
      // eslint-disable-next-line
      app.model(require(`../models/${model}`).default);
    }
  });

  // () => require('module')
  // transformed by babel-plugin-dynamic-import-node-sync
  if (component.toString().indexOf('.then(') < 0) {
    return props => {
      if (!routerDataCache) {
        routerDataCache = getRouterData(app);
      }
      return createElement(component().default, {
        ...props,
        routerData: routerDataCache,
      });
    };
  }
  // () => import('module')
  return Loadable({
    loader: () => {
      if (!routerDataCache) {
        routerDataCache = getRouterData(app);
      }
      return component().then(raw => {
        const Component = raw.default || raw;
        return props =>
          createElement(Component, {
            ...props,
            routerData: routerDataCache,
          });
      });
    },
    loading: () => {
      return <Spin size="large" className="global-spin" />;
    },
  });
};

Data operations create a new js file (corresponding to the model in routerConfig) under the src/models/folder as the model of this page, which defines the data needed for the page and some functions. In the model, there are namespaces (namespaces used to distinguish data between different pages), states (data in that namespace), effects (api methods for asynchronous requests are defined here), and reducers (functions used to modify states are defined under reducers).

model is similar to the role of controller in mvc structure, which has five configuration items.

• namespace
• The namespace of model, which is also its attribute on global state, can only use strings, and does not support the creation of multi-tier namespaces by. way.
• state
• The initial value of state is lower than the opts. initial state passed to dva().
• The reducers key/value format defines reducer for handling synchronous operations, the only place where state can be modified. Triggered by action
• effects
• Define the effect in key/value format. Used to handle asynchronous operations and business logic without directly modifying state. Triggered by action, action can be triggered, interaction with the server, global state data can be obtained, and so on.
• subscrip
• Define subscription in key/value format. Subscription is a subscription that subscribes to a data source and dispatch es the corresponding action as needed. When executed at app.start(), the data source can be the current time, the server's websocket connection, keyboard input, geolocation change, history routing change, and so on.

Instead of writing the code to initiate the request directly in the model, the requests are unified under / src/services / and a new js file is created to store the functions of various requests. These functions are exposed and referenced in the model.

The overall operation process is as follows:

• Enter the page and call the method in the effect of model in the componentDidMount hook function of the page

• This method calls the uniformly managed request function under the service folder

• Get the server return value, get it in the effect of the model, and call reducer under the model

• Call reducers of the model to process the requested data, change the state of the model, and render the page automatically.