umi+dva的简单使用

FAIGEL℡

已于 2022-10-19 16:18:31 修改

阅读量3.4k

点赞数 5

文章标签： js react.js

于 2022-08-23 12:02:01 首次发布

本文链接：https://blog.csdn.net/weixin_44941697/article/details/126481071

版权

前言

最近在项目中接触了umi框架，当然使用的前提是熟悉react和router。而dva我感觉像是redux和react-router的结合。下面讲一下我在项目中的实际使用。

提示：以下是本篇文章正文内容，下面案例可供参考

一、dva是什么？

我个人感觉dva和redux非常相似是一个管理状态的工具。快速上手 | DvaJS

官网介绍：dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架

二、使用步骤

1.新建项目

$ yarn create @umijs/umi-app 或 npx @umijs/create-umi-app

具体各个文件是什么意思大家可以去看umi的官网，这里就长话短说。

2.使用dva

dva最重要的就是要有model文件，下面是umi内置的dva：

这里借用一下其他博主的图，我感觉非常的形象：

我的理解：model其实就是一个函数：

里面包括namespace，state,reducers,effects,subscriptions。

export default {
  //namespace命名空间，相当于给model取个名字，但是各个model的namespce是不能重复的
  namespace: 'test',
  //state我理解为是数据仓库，就是存数据的地方，model里的数据都是存放在这里的
  state : {
    name: 'wang'
  },
  /*reducers把数据存到仓库（存到state）里的唯一方法，我们修改state里的数据不能直接像this.name='liu'这样去修改，而必须通过调用reducers里的方法，在之后会详细讲到*/
  reducers:{

  },
  /*异步方法，简单来说我们的异步请求就写在这里*/
  effects: {

  },
  /*订阅，在这里我的理解就是监听页面的，比如监听到进入了某某页面就让它执行相关代码之类的*/
  subscriptions: {

  }
}

model文件的内容结构大概就是这样：

1.namespace是命名空间，基本和你的ts文件名保持一致。比如：

2.state就不用介绍了，是你希望保存和修改并且可以传递到其他组件的全局状态。

3.reducers的结构：save函数接收两个参数分别是state和action，返回一个新的state。

//格式如下
 reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },

4.effects：异步的方法，我们的网络请求都写在这里，也可以写数据筛选之类的方法。需要注意的就是yield call和yield put的使用。

这里的put()其实就是调用的我们之前写的reducers里的save方法，在effects拿到数据后通过yield put调用reducers的save方法来改变state。

3.使用connect

写完model和component后，将使用connect将他们串联起来。

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。

import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

// export default Products;
export default connect(({ products }) => ({
  products,
}))(Products);

connect接收四个参数:mapStateToProps允许我们将 store 中的数据作为 props 绑定到组件上。
mapDispatchToProps将action作为props绑定到组件上。
mergeProps和options基本不传，我们只要掌握前两个就好了