The official documentation

The data flow

When there is an interactive behavior, an action will be initiated through Dispatch. If it is a synchronous behavior, state will be changed by reducer. If it is an asynchronous behavior, effect will be triggered first and then flow to reducer to finally change state, as shown below:

Models

Namespace: indicates a unique namespace

State: Indicates Model status data

Action: The only way to change state is to initiate an Action through Dispatch

dispatch:

Dispatch ({type: 'user/add', // Add namespace payload: {}, // Send information});Copy the code

Reducer: The Reducer is used to handle synchronization operations and is the only place where state can be modified. Triggered by action in the format (state, action) => newState or [(state, action) => newState, enhancer]

Effect: Used to handle asynchronous operations and business logic without directly modifying state.

Subscription: The semantics are subscriptions, which are used to subscribe to a data source and then dispatch required actions based on conditions. The data sources can be the current time, the server’s Websocket connection, keyboard input, geolocation changes, history route changes, and so on.

Api

1. Const app = dVA (options) Create app, return dVA instance.

Const app = dva({history: defaults to hashHistory initialState: specifies the initial data and takes precedence over state in model onError: specifies the global error onAction: OnHmr: extraReducers: extraEnhancers:})Copy the code

2. App. use(hooks) Configure hooks or register plug-ins.

3. The app. The model (the model) registered model

4. App.unmodel (namespace) Unregister model

5. App. router(({history, app}) => RouterConfig) Registers the routing table

import { Router, Route } from 'dva/router';
app.router(({ history }) => {
  return (
    <Router history={history}>
      <Route path="/" component={App} />
    <Router>
  );
});
Copy the code

It is recommended to separate routing information into a separate file

app.router(require('./router'))
Copy the code

6. App. start(selector) Starts the application