Architecture part -- the use of UMI framework and DVA

First, declare ： This is a result of umi + antdesign + dva Constituent items , This section mainly describes , Build one to do Components + Request interface data + Data management model + mock data The concise 、 science 、 Effective logical structure , And how to achieve it , What are the advantages of it .

1. The directory structure is as follows ：
   

2. customer/list/index.jsx：
   

3. action/customer.js file ：
   

4. models/customer.js
   

5. services/customer.js：
   

6. mock/user.js：
   

7. The above sequence is arranged according to the logical sequence of data activities

• Here comes the user customer/list/index.js （ chart 2） This interface
• The hook function called action/customer.js （ chart 3） The method in
• Triggered models/customers.js （ chart 4） Asynchronous functions in *fetchList
  • adopt call() Method , Trigger services/customer.js （ chart 5） Medium request Request to get the data and return it here to response（ notes ： Here can be requested mock data , It can also be the data of the requested real interface ）
  • And then through put() Methods the trigger Synchronization function saveList() , Save the data to state in
• stay customer/list/index.js（ chart 2） In the interface , adopt connect Methods will state Data is associated with components , Make this component available for state data , A complete data flow is formed .

Be careful ： Above request yes umi The framework's own request method , It's sealed , stay src/utils/request in

8. Precautions and advantages

• The file name of each process node required by a data activity should be the same , Easy to read and understand , Such as customer.js stay action、models、services、mock This name is all under the folder
• action Constant is defined in , As mentioned above CUSTOMER Constant , The advantage is that when called in a build , stay models This value is in the namespace under , If there is any modification , Just change this constant , convenient
• Above request yes umi The framework's own request method , It's sealed , stay src/utils/request in

9. shortcoming

• At present, I feel that the biggest drawback is ,dva Data stream processing is done using generation Packaged , At present, the mainstream idea is Promise, Out of the mainstream , May be used later generation There are fewer and fewer front-end developers , High cost of later maintenance . Here you are 2 An account generation And promise The article ：generation And promise,Async、Promise and Generator