We all know that the front end has evolved very quickly in recent years, and when you’re comfortable in Crud-ing, it’s a different world when you open your eyes, so I had to look up and see what dVA was all about.

dva

Lightweight front-end framework based on Redux, Redux-Saga and React-Router.

Why is it called DVA?

The D.VA’s mecha is agile and powerful – its dual-core fusion cannon explodes with automatic fire at short distances, and she can use her boosters to smash through enemies and obstacles, or attack with a defense matrix that removes projectiles.

Anyway, it’s awesome.

Do you support Internet Explorer 8?

Currently not supported.

If you want to know where DVA came from, you have to go back to dVA’s predecessor, React + Redux Best Practices

In the future, the developers have developed a encapsulation solution based on the best practices to simplify many of the tedious operations of using Redux and Redux-Saga: DVA

We all know that the front end has evolved very quickly in recent years, and while you’re still comfortable in crud-ing, it’s a different world to open your eyes, but no matter how it changes, there are a few core concepts:

  • URLI need to know what page to go to
  • DataIn order to display information
  • ViewWhat does this page look like
  • ActionOperations on the page
  • API Server - DataSource of data

The following is a brief description of these five aspects

URL -> Data

Requirements: routing

Select react-router + react-router-redux

(The former is the industry standard, the latter can synchronize route information to state, so that the view can adjust the display according to the route information, and Action can modify the route)

Data

Requirements: Provide a data source for Redux, easy to modify

Solution: Plain Object coordinates with combinReducer

Date -> View

Requirements: Data filtering and filtering

Solution: Store and Select, filtering logic for extracting data, keeping Component simple.

Action <> Store Business logic processing

Requirement: Unified processing of business logic, especially asynchronous processing

Solution: Redux-saga is used to manage actions and handle asynchronous logic

So… Here’s the picture:

The purpose of the Dva

After talking about the predecessor of DVA, dVA’s birth is very clear.

To make building Redux applications easier

The first impression

import dva from 'dva' ;
// Create a DVA instance
const app = dva();
// Load the plug-in
app.use(require('dva-loading') ());/ / registered Model
app.model(require('/models/count'));
// Configure the route
app.router(require('./router'));
// Start the application
app.start('#root');
Copy the code

Dva features

  • There are only five apis
  • Support HMR
  • Support the SSR
  • Support for mobile /ReactNative
  • Support the TypeScript
  • Dynamic loading of routes and models is supported
  • Complete syntax analysis library DVA-AST

Hooks and plug-ins

  • OnError (fn, scheduling)
  • onAction( fn | fn[] )
  • onStateChange ( fn )
  • onReducer( fn )
  • onEffect ( fn )
  • onHmr ( fn )

Dva load

import createLoading from 'dva-loading';

const add = dva ();
app.use(createLoading(opts));
Copy the code
function mapStateToProps(state,ownProps){
 return {
	loading:state.loading.global, ... listSelector(state,ownProps), }; }export default connect(mapStateTpProps)(ListPage);
Copy the code

Error trapping

import {message) from 'antd';
const ERROR_MSG_DURATION = 3; / / 3 seconds
const app = dva ({
	onError(e){ message.error(e.message,ERROR_MSG_DURATION); }})Copy the code

Error trigger

*a(){
	throw new Error('a error');
}
Copy the code

Take one example: counters

import React from 'react';
import dva, { connect } from 'dva';
import './style.css';

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

console.log(2);

// 2. Model
app.model({
  namespace: 'count'.state: 0.reducers: {
    add  (count) { return count + 1 },
    minus(count) { return count - 1,}}});class TestError extends React.Component {
  componentDidCatch(e) {
    alert(e.message);
  }
  componentDidMount() {
    // throw new Error('a');
  }
  render() {
    return <div>TestError</div>}}// 3. View
const App = connect(({ count }) = > ({
  count
}))(function(props) {
  return (
    <div>
      <TestError />
      <h2>{ props.count }</h2>
      <button key="add" onClick={()= > { props.dispatch({type: 'count/add'})}}>+</button>
      <button key="minus" onClick={()= > { props.dispatch({type: 'count/minus'})}}>-</button>
    </div>
  );
});

// 4. Router
app.router(() = > <App />);

// 5. Start
app.start('#root');

Copy the code