使用Vite搭建项目，帮助你理解Dva

前言

前段时间去彻底回顾了下Umi 和 Antd Desgin Pro 其中的配置和插件。都会用到Dva来做状态管理中心，今天有时间，去Dva官网查文档。学习Dva的使用。现在从0-1 使用vite + dva 来写一个Demo，加深自己对Dva理解

使用Vite创建React项目

yarn create @vitejs/app

输入要创建的目录名称，回车确认。

这里我创建的文件夹名称是dvavite

选择使用的框架是react，回车确认

选择使用的语言是react-ts，回车确认

• yarn 安装项目所需要的依赖

• yarn run dev 启动项目

看到如下页面，说明已经成功使用vite 创建好了一个react项目

主要文件解析

• App.tsx 初始化页面

• main.tsx vite 加载核心页面

• vite-env.d.ts ts不检查的第三方库,文件

初始化项目结构

创建Pages文件夹里面写入2个页面文件UserInfo.tsx, Home.tsx。

内容如下：

UserInfo.tsx

Home.tsx

创建models文件夹

目前的项目结构为：

配置dva

安装dva

 yarn add dva

dva版本：

dva 简介

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

dva 五部曲

dva 内置了路由，所以我们不需要去下载React-Routes包。可以直接使用路由

• 获取dva的实例

• 注册Plugins插件（可选）

• 注册model插件

• 挂在Router插件

• 启动dva

main.tsx文件

五部曲配置结束后，我们需要去写一个model状态中心。将我们希望储存的数据放入其中

在model文件夹下新建userInfo.tsx文件

注册我们刚写的userInfo文件

修改pages/UserInfo.tsx文件中的内容

从dva中导出connect, 将userInfomodel拼接在组件上

此时我们打印下props，看下props的内容

看到props/userInfo有我们初始化的仓库数据，证明userInofmodels绑定成功

但是此时有一个错误，遇到错误不要慌。

找到node_modules/dva/lib/index

替换

// var _createHashHistory = _interopRequireDefault(require("history/createHashHistory"));
var _createHashHistory = _interopRequireDefault(require("history").createHashHistory);

重新 yarn run dev 一下 , 警告消失

修改model中储存的数据

修改UserInfo.tsx文件

效果图

增加一个跳转按钮，查看跳转路由后，数据是否改变

修改UserInfo.tsx文件

修改Home.tsx文件

效果图

看到更改后的数据已经储存成功

源码

UserInfo.tsx

import React from 'react'
import { connect } from 'dva';
import { userInfoType } from '../models/userInfo';

interface UserInfoType {
    userInfo: userInfoType,
    dispatch: any,
    history: any
}

const UserInfo: React.FC<UserInfoType> = (props) => {
    // 将userInfo dispatch 从props中结构出来
    const { userInfo, dispatch, history } = props

    // 改变
    const changeValue = () => {
        dispatch({
          type:'userInfo/save', 
          // 传输的数据
          payload:{
            name:'李四'
          }
        })
    }
    return (
        <div>
            <h1>{userInfo.name}</h1>
            <h1 onClick={changeValue}>点我变为李四</h1>
            <h1 onClick={() => {
              history.push('/home')
            }}>跳转到Home页面</h1>
        </div>
    )
}

export default connect(({ userInfo }: userInfoType) => ({
    userInfo,
  }))(UserInfo);
  

Home.tsx

import { connect } from 'dva';
import React from 'react'
import { userInfoType } from '../models/userInfo';

interface HomeType {
    userInfo:userInfoType
}

const Home: React.FC<HomeType> = (props) => {
    console.log(props.userInfo,'Home打印的');
    
    return (
        <div>Home</div>
    )
}

export default connect(({ userInfo }: userInfoType) => ({
    userInfo,
  }))(Home);

还有Effect 和 Subscription 的使用下次再说，产品又催了。。。。