1.2.3. dva

What is DVA and what pain points does it address

  • Dva is a data flow solution based on Redux and Redux-Saga. In order to simplify the development experience, DVA also has additional built-in React-Router and FETCH, so it can also be understood as a lightweight application framework.
  1. Communication between components: The React component communicates with a parent and a brother only through parameter transmission. This is inconvenient for large applications.
  2. Data flow: How is the data concatenated with the view? How are routes and data bound? How to write asynchronous logic etc?
  3. Before using DVA, the data flow scheme was complicated, and multiple third-party libraries were introduced:
  • Routing: the react – the router
  • Architecture: redux
  • Asynchronous operation: redux-saga

After the introduction of DVA, the above three are wrapped in a tool library package, simplifying the API and making development easier.

Explain the basic composition and function of the Model object

The Model object definition consists of:

  • namespace:
  • State: Declaration of data structure variables
  • Reducers: A pure set of functions (that is, changing state by action) that define synchronized action actions
  • Effects: Set of asynchronous functions that define asynchronous action actions
  • Subscriptions: Set of subscription functions
app.model({
  namespace: 'count'.state: {
    record: 0.current: 0,},reducers: {
    add(state) {
      const newCurrent = state.current + 1;
      return { ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent,
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1}; }},effects: {*add(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'minus'}); }},subscriptions: {
    keyboardWatcher({ dispatch }) {
      key('⌘ + up and CTRL + up'.() = > { dispatch({type:'add'})}); ,}}});Copy the code

What are the enabling conditions for @umijs/ plugin-DVA

Configuration started successfully

Dva-loading implementation principle

Dva-loading is called to associate the extraReducers and onEffect returned to other DVA components and methods, and then the onEffect method is triggered by the onEffect associated method to complete the loading explicit and implicit and data operations by 3 yields. It is worth mentioning that when the onEffect is triggered, the yield PUT triggers the extraReducers, which manage the final explicit and implicit state through redux-saga