Table of contents

foreword

The advanced writing method of the models folder in Dva and the model.ts can be written under the corresponding pages page, which is easy to manage

1. What is dva?

dva is a lightweight framework based on React and Redux to simplify the data flow and state management of applications. Its name comes from "Data Visualization and Analysis", and its purpose is to provide an easy-to-understand and use state management framework.

dva study is enough

2. Use steps

1. index.ts under the models folder

The code is as follows (example):

const models = {};
function importAllModels(ctx: __WebpackModuleApi.RequireContext) {
  ctx.keys().forEach((k) => (models[k] = ctx(k).default));
}
importAllModels(require.context("@/pages", true, /model\.ts$/, "sync"));

export default Object.values(models);

This code mainly implements @/pages the automatic import model.ts of all files ending in the directory, and returns their default exports as an array. Specifically, it uses require.context() methods provided by Webpack to fetch matching modules, and then default returns the exports of those modules as an array.

The specific implementation process is as follows:

First, an empty object is defined models to store imported modules.
```
const models = {};
```
Then, a function is defined importAllModels()that imports the modules that meet the requirements.
```
function importAllModels(ctx: __WebpackModuleApi.RequireContext) {
  ctx.keys().forEach((k) => (models[k] = ctx(k).default));
}
```
importAllModels() The function takes as parameter a Webpack context object ctx containing some matching modules. We can use ctx.keys() the method to get all matching module paths, then iterate over those paths and assign the module's default exports to models the corresponding keys of the object.
Finally, use require.context() the method to get the matching modules, and call importAllModels() the function to import those modules into models the object.
```
importAllModels(require.context("@/pages", true, /model\.ts$/, "sync"));
```
require.context() The method accepts four parameters:
- The directory path to search.
- Whether to search subdirectories.
- Regular expression to match modules.
- How to load modules.
In this example, we specify to search for @/pages all model.ts files matching the regular expression in the directory and its subdirectories, and load these files synchronously.
Finally, use Object.values() the method to models return the values in the object as an array.
```
export default Object.values(models);
```
Object.values() The ES6 method is used here to models return all the values in the object as an array, and each element in this array is an default export of a matching module.

2. Use under the pages folder

Summarize

In general, this code mainly implements automatic import of modules that meet the requirements, and default returns their exports as an array. It uses Webpack's require.context() method of fetching matching modules and uses an empty object models to store imported modules. Finally, use Object.values() the method to models return all the values in the object as an array.

Advanced writing of the models folder in Dva