Dva.js is a front-end framework based on react, Redux and webback developed by Alibaba front-end team. It can realize one click deployment of react Redux webback environment, which can save front-end engineers a lot of time in setting up the environment. And the optimized Redux is more convenient to use than the native redux. Let's talk about the usage of dva.js.

Official case of dva.js:

https://ant.design/docs/react/practical-projects-cn

github:

https://github.com/dvajs/dva

Install DVA cli globally first

cnpm install dva-cli -g

To initialize an application using DVA cli:

dva new your-project-name

Then enter the project directory and create a new file, dev.bat, as follows:

call npm run start

After saving, double-click dev.bat to open the development server and the initial page will appear.

Here we use an addition counter as a demonstration.

1. New demo.js and demo.css in routes folder

import {connect} from 'dva'
import styles from './demo.css'

function demo({dispatch,num}) {      //dispatch is used to manipulate the data model.

  function Add() {
    console.log(num);
    dispatch({
      type:"num/add",       //num represents the data model and add represents the method. Here you can pass parameters through payload.
　　　　// payload: 1,          
    })
  }

  return(
    <div className={styles.checkNum}>
      <input type="button" value="+" onClick={Add}/>
      <input type="input" value={num}/>
      <input type="button" value="-"/>
    </div>
  )
}


export default connect(        //Connect the component to the data model.
  ({num})=>({num})
)(demo);

demo.css:

.checkNum{
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
}

Model folder new file num.js

export default {
  namespace:'num',
  state:0,
  reducers:{
    'add'(state){        //Num can be understood as data model, state is the initial value of data, and add is the method name used to modify num. If you need to refer to the official tutorial. (payload)
      state++;
      return state
    }
  }
}

Go to index.js under src and register the num data model:

import dva from 'dva';
import './index.css';


// 1. Initialize
const app = dva();

app.model(require('./models/num').default);
app.router(require('./router').default);

This step is easy to miss if you are careless. Be careful.

Add demo route in router.js under src folder:

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import demo from './routes/demo'

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/demo" exact component={demo} />

      </Switch>
    </Router>
  );
}

export default RouterConfig;

At this time, visit http://localhost:8000/#/demo to see the results.

Please complete the subtraction function and read the official cases to consolidate your knowledge.