Dva framework is a data flow solution based on Redux and Redux-Saga, with built-in React-Router and FETCH, which makes data management more convenient and refines functions, so it is very convenient to use. It is a lightweight application framework.

With the DVA framework, each page consists mainly of three JS pages in three folders

  1. Arunachal Pradeshroutes** folder under the JS file, mainly to present the page needs to display the content
  2. Arunachal Pradeshmodels** folder under the JS file, mainly used to control the logic of data processing, synchronous and asynchronous operations are completed in this JS file
  3. Arunachal PradeshserviceThe js file in the ** folder is only used to call the API to get the data (how to handle the data is handled in the JS file in the Models folder)

With the exception of the above three files, the path information for accessing each page is placed in the SRC /common/nav.js file. The nav.js file mainly introduces the JS files in routes and names them. In other words, the files in routes are used as a component and the component is given a name for easy use

For example: nav. Js

import Login from ‘.. /routes/Login’;

const components = new Map();

components.set(‘login’, Login);

How to write the js file inside the routes folder? Suppose you have a login.js

  • Introduce the required tool class JS file; Import required components from ANTD; Import CONNECT from DVA; Introduce react PureComponent from React

  • @connect(state => ({namespace: state.namespace})), where namespace is the namespace of the login.js file in the Models folder

    @connect(state => ({propsName: state.namespace}))// propsName is an arbitrary property name, and you can use this.props. PropsName to access information in the Models fileCopy the code

  • @Form.create()

  • The most important part of the document is also the last part

    export default class *** extends PureComponent{ state = {}; Table columns = [{title: // componentDidMount(){} table columns = [{title: // componentDidMount(){} '***', dataIndex: '***',// which field is required to assign a value to, if not, null key: '***',// width: 80,},]; RenderTable () {// Set the styles and attributes of the table, such as paging, columns, data sources, etc. // Suppose we need to call the add function of the login.js file in the models folder as follows: this.props. Dispatch ({type: 'namespace/add',//add is a function in the login.js file. Payload: {}, callback: () => {// RenderModal (){} render(){const {***} =? RenderModal (){} render(){const {***} = this.props.propsName; / / get models in the file properties / * * * this. Props and some methods and properties: dispatch, propsName, form, history, location, match * / return (< Card > {this.renderTable()} {this.renderForm()} {this.renderModal()} </Card> ) } }Copy the code

How to write login.js in the models folder?

  1. To import files that need to be used, you must import several functions that fetch data from login.js in the service folder, unless the file does not fetch data

  2. The second and final part

    Export default {namespace: '****',//routes The namespace in login. js must have the same state as here: {},// All the values in this state object are called this.props. Namespace. *add({payload, callback}, {call, put}) {yield put({type: 'changeLoading',//changeLoading is the name of the reducers function payload: true,}); callback && callback(); // If login. js in the routes folder accesses the add function in the models folder and has a callback, perform the yield call(**,payload); }}, reducers: {changeLoading(state, action) {return {... state, loading: action.payload } } } }Copy the code

In the service folder, the login.js file consists of multiple functions to get data, such as an add function, then

import request from '.... '; Export async function add({}) {return request(' Where to fetch data? param1=${**}&param2=${**}`, { method: '**', body: {} }); Return request(' path to data ', {method: 'Get',//or 'POST' body: {}}); }Copy the code

The above is the way I am used to using it. There is another way. The difference lies in the different way of defining state in login.js file under routes folder, while the same way of defining state in login.js file under Models folder.

export default class *** extends PureComponent{ //state: {}; Replace this with the following: constructor(props) {super(props); this.state = { ... Namespace}} // This. State = {... this.props.namespace}; Const {**} = this.state; // Const {**} = this.state; // Const {**} = this.state; }Copy the code

If you think it is helpful for you to write in detail, please click a “like” to express encouragement; If you think it is not detailed enough, you can leave a message and tell me, and I will supplement it accordingly