React 三大仓库（Dva 、mobx 、Redux）

Dva:数据状态管理库
mobx：响应式管理
Redux:函数式管理

1.Dva详解

1.使用dva脚手架（dva-cli）快速构建React项目

npm install -g dva-cli

2.定义model

• 先设计 model
• 设计 component
• 连接两者（model 和 component）

2.1

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的
effects，订阅数据源的 subscriptions 。

1.新建 model models/products.js ：

export default {
   
  namespace: 'userInfo', //全局 state 上的 key
  state: [], //初始值
  reducers: {
   }, // 相当于redux 里的 reducer，接收 action，同步更新 state
  },
};

2.在index.js载入

+ app.model(require('./models/products').default);

3.定义一个组件

import React from 'react';
import PropTypes from 'prop-types';
import {
    Table, Popconfirm, Button } from 'antd';

const ProductList = ({
    onDelete, products }) => {
   
  const columns = [{
   
    title: 'Name',
    dataIndex: 'name',
  }, {
   
    title: 'Actions',
    render: (text, record) => {
   
      return (
        <Popconfirm title="Delete?" onConfirm={
   () => onDelete(record.id)}>