You saw

Umi framework is encapsulated by React + React-Route + Webpack, while DVA is a data flow solution based on Redux and Redux-Saga. In addition, DVA also integrates React-Router and FETCH.

Create and start project scaffolding

Start by creating an empty folder

$ mkdir new-umi-dvaCopy the code

Go to the created folder and create a UMI + DVA project

$ cd new-umi-dva
$ yarn create umiCopy the code

Select the following options

Run the command after the creation is complete

Yarn or CNPM I // Download depends on NPM start // Start the project. The default start website is http://localhost:8000Copy the code

Now write a function that queries current personal information based on user name ID

The directory structure of the project:

A complete React page is View + Service + Model, corresponding to index. JSX, service.js, model.js.



index.js



service.js



model.js



Summary of code ideas:

After the index.js UI component is written, the userView is an empty collection until the user ID event is triggered. After the user ID event is triggered, this.props. Dispatch can be used in the function because of the connect decorator introduced by DVA. The dispatch function is triggered in the model.js effects getViewModel function. When performing a yield call, the service.js function is triggered to send the network request, and the yield PUT operation is determined based on the data returned by the server. If response.res returns true, perform yield put to getViewReducer() of reducers to update the View data in the state. When the state value is updated, The state.view is reassigned to this.props. UserView of index.js, and the personal information for the current user ID is retrieved.



If there are mistakes or omissions, welcome to give advice!