dva初步学习理解

官方文档

写在开头

dva的出现其实要因为它集合了redux和redux-saga。redux一直是用来负责“容器的状态(数据)”管理但是通过无数个例子我们发现其实更多的是它的reduer处理action来改变state来管理数组的同步操作，此时类似于请求接口的异步操作对于如何就有了分歧，此时就有了redux-saga的出现。redux-saga是用来管理redux应用异步操作的中间件。将异步操作用generator(构造器)的方式来管理。

简单点的记法

“一个管理同步，一个通过中间件管理异步”。

安装

dva安装

$ npm install dva-cli -g
$ dva -v
$ dva new dva-quickstart

例子

首先通过官方的例子来看以下大概的结构是什么样子的（真实项目肯定跟这个不一样，所以知道怎么哪一块怎么用就行了）

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 
TestError
  }
}

// 3. View
const App = connect(({ count }) => ({
  count
}))(function(props) {
  return (
    

      
      
{ props.count }
       { props.dispatch({type: 'count/add'})}}>+
       { props.dispatch({type: 'count/minus'})}}>-
    
  );
});

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

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

分块解释(个人理解)

官方例子写的比较明白，以下部分就是对当前步骤的一些个人理解。

1. 应用dva（）

// 1. 对dva初始化, 个人认为就是应用dva
const app = dva(); 

2. model编写

model这块个人理解就是一个redux和redux-saga的reducer集合。

namespace用来充当标志(key)所在，后面的view层上会用到。
state和reducers就是redux的state（初始值）和reducers（处理数据的方法）
effects这个effects就是redux-saga的内容了。就是写个构造器，通过yeild的方式调用。也是reducer=>action这么一个套路

Tip:

dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。

call：执行异步函数

put：发出一个 Action，类似于 dispatch

// 2. Model模型编写
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add  (count) { return count + 1 },
    minus(count) { return count - 1 },
  },
  // effects, call和put用来内部处理effects。
  effects: {
    function *addAfter1Second(action, { put, call }) {
      yield call(delay, 1000);
      yield put({ type: 'add' });
    }
  },
});

3. view层如何触发

这一块就是用来展示如何触发的其实还是dispatch的触发方式，但是要处理state这块，因为你的namespace是count所以你的type就是count/xxx

// 3. View
const App = connect(({ count }) => ({
  count
}))(function(props) {
  return (
    

      
      
{ props.count }
       { props.dispatch({type: 'count/add'})}}>+
       { props.dispatch({type: 'count/minus'})}}>-
    
  );
});

结尾

在真实项目中，dva肯定不会是这么简单的结构，但是只要对于namesapce、state, reducer, effects有了一定的认识，dva用起来的话，不是那么的困难。

这篇写的很剪短，但是对于各项都写了一点介绍，日常使用来说是足够了。如果有问题欢迎评论～看到了会及时回复。