Umi+Dva入门

• 1_Dva、Umi初识
• • 1.1_Dva在前端的位置
  • 1.2_Umi作用
  • 1.3_建立一个Umi项目
  • 1.4_整理项目结构
• 2_Dva详述
• • 2.1_Model模块
• 3_模板
• • 3.1_FirstExample
  • 3.2_SecondExample

1_Dva、Umi初识

https://dvajs.com/guide/

https://v3.umijs.org/zh-CN

1.1_Dva在前端的位置

1. 只有React可以做前端，但是数据的共享传输会是一个大问题
2. 后来React+Redux可以让数据存在一个总的仓库中，并优化了数据的传输问题，但是对于异步的数据传输并没有解决
3. 后来React+Redux+Redux-saga解决了异步的数据传输问题
4. 后来React+Redux+Redux-saga+React-router
5. 但是这么多技术太繁琐了，所以Dva诞生了，只需要React+Dva即可代替4

1.2_Umi作用

作用1：用于整合

作用2：用于自动配置路由

1.3_建立一个Umi项目

脚手架

先找个地方建个空目录。

$ mkdir myapp && cd myapp

通过官方工具创建项目，

$ yarn create @umijs/umi-app# 或 npx @umijs/create-umi-app
Copy:  .editorconfigWrite: .gitignoreCopy:  .prettierignoreCopy:  .prettierrcWrite: .umirc.tsCopy:  mock/.gitkeepWrite: package.jsonCopy:  README.mdCopy:  src/pages/index.lessCopy:  src/pages/index.tsxCopy:  tsconfig.jsonCopy:  typings.d.ts

安装依赖

$ yarn
yarn install v1.21.1[1/4] 🔍  Resolving packages...success Already up-to-date.✨  Done in 0.71s.

启动项目

$ yarn start
Starting the development server...
✔ Webpack  Compiled successfully in 17.84sDONE  Compiled successfully in 17842ms                                       8:06:31 PMApp running at:  - Local:   http://localhost:8000 (copied to clipboard)  - Network: http://192.168.12.34:8000

1.4_整理项目结构

2_Dva详述

2.1_Model模块

model就是存储数据、中转数据的仓库。

写法：

解释：action = {type,payload}，type一般没用

effects = {put,call}

import { Effect, ImmerReducer, Reducer, Subscription } from 'umi';const TryAModel = {namespace: 'tryamodel',state: {name: '',},/*effects 异步操作，经常用来和后端交互*/effects: {*function_name(action:any, effects :any) {},},/*同步操作：经常用于仓库给各组件传值*/reducers: {function_name(state,action) {}// 启用 immer 之后// save(state, action) {//state是旧值//   state.name = action.payload;//   newState = state//   return newState// },},subscriptions: {//如果路径名是'/'则调用function_name函数setup({ dispatch, history }:any) {return history.listen(({ pathname }:any) => {if (pathname === '/') {dispatch({type: 'function_name',});}});},},
};export default TryAModel;

3_模板

有两种方式

第一种会将数据存到仓库再返回

第二种会将数据直接返回

3.1_FirstExample

FirstExampleModel

import {Reducer, Effect, Subscription} from "umi";
/*
-----------------------------------------------------------------------------------------------------------------
本model用来演示正规的流程，即
①组件连接仓库；
②组件通过connect连接后给组件自动传的参数dispatch访问仓库中的异步函数effects；
③effects获取到数据后调用同步函数reducers存储数据到仓库state中
④组件自动更新参数并重新渲染
-----------------------------------------------------------------------------------------------------------------*//*
-----------------------------------------------------------------------------------------------------------------
ts规范：对变量进行声明*/
//对state声明，state用于仓库存储数据，也就是说state就是仓库
export type StateType = {list?: any[];
};
//对model声明
export type ExampleModelType = {namespace: string;state: StateType;effects: {getListFromServicesEffects: Effect;};reducers: {getListReducers: Reducer;};subscriptions: {// setup: Subscription;}
};
/*
ts规范：对变量进行声明
-----------------------------------------------------------------------------------------------------------------*//*
-----------------------------------------------------------------------------------------------------------------
model结构：namespace，state（仓库，用来存储数据），
effects异步处理，reducers同步操作（用于接收effects的结果并存到state中），subscription订阅（用于监听页面的跳转）
state变化后，连接此model的组件所接收到的参数会自动渲染*/
const FirstExampleModel: ExampleModelType = {//本model唯一标识，命名标准：不能有'-'，可以有'_'，可以有大写//个人标准：以后都以'Model_'开头namespace: 'Model_FirstExampleModel',//Model_ExampleModel里面存的是statestate: {list: [],},//命名规范（个人）：函数功能+FromServices+Effectseffects: {*getListFromServicesEffects({ payload }:any, { call, put }:any) {console.log("进入")yield put({type: 'getListReducers',payload: ['first'],});payload.callback('出来')},},//命名规范（个人）：函数功能+Reducersreducers: {getListReducers(state, {payload}) {//返回形式return {...state}，必须是"...state"，否则报错console.log(state)return {...state,list:payload};//将payload赋值给list},},subscriptions: {// setup({dispatch, history}: any) {//   return history.listen(({pathname}: any) => {//     if (pathname === '/') {//       dispatch({//         type: 'getListReducers',//       });//     }//   });// },}
};
/*
model结构
-----------------------------------------------------------------------------------------------------------------*/export default FirstExampleModel;

函数组件：FirstExample

import {connect} from "umi";const FirstExample = (props:any) =>{console.log(props.Model_FirstExampleModel)const clickTry = (props:any) =>{if (props.dispatch){props.dispatch({//路径：model的namespace+effects函数名type: 'Model_FirstExampleModel/getListFromServicesEffects',payload: {callback: (value: any) => {console.log(value);},},})}console.log(props.Model_FirstExampleModel)}return (
()=>{clickTry(props)}}>FirstExample
);
}
//连接的参数名必须是model的namespace
export default connect(({ Model_FirstExampleModel }: any) => ({Model_FirstExampleModel,
}))(FirstExample);

3.2_SecondExample

SecondExampleModel

import {Reducer, Effect, Subscription} from "umi";
/*
-----------------------------------------------------------------------------------------------------------------
本model用来演示简便的流程，即不通过reducers和state仓库直接在effects中返回
①组件连接仓库；
②组件通过connect连接后给组件自动传的参数dispatch访问仓库中的异步函数effects；
③effects获取到数据后调用callBack回调函数返回数据
④组件通过callback获取回调数据
-----------------------------------------------------------------------------------------------------------------*//*
-----------------------------------------------------------------------------------------------------------------
ts规范：对变量进行声明*/
//对state声明，state用于仓库存储数据，也就是说state就是仓库
export type StateType = {list?: any[];
};
//对model声明
export type ExampleModelType = {namespace: string;state: StateType;effects: {getListFromServicesEffects: Effect;};reducers: {};subscriptions: {}
};
/*
ts规范：对变量进行声明
-----------------------------------------------------------------------------------------------------------------*//*
-----------------------------------------------------------------------------------------------------------------
model结构：namespace，state（仓库，用来存储数据），
effects异步处理，reducers同步操作（用于接收effects的结果并存到state中），subscription订阅（用于监听页面的跳转）
state变化后，连接此model的组件所接收到的参数会自动渲染*/
const SecondExampleModel: ExampleModelType = {//本model唯一标识，命名标准：不能有'-'，可以有'_'，可以有大写//个人标准：以后都以'Model_'开头namespace: 'Model_SecondExampleModel',//Model_ExampleModel里面存的是statestate: {list: [],},//命名规范（个人）：函数功能+FromServices+Effectseffects: {*getListFromServicesEffects({ payload }:any, { call, put }:any) {console.log("进入")payload.callback(['second'])},},//命名规范（个人）：函数功能+Reducersreducers: {},subscriptions: {}
};
/*
model结构
-----------------------------------------------------------------------------------------------------------------*/export default SecondExampleModel;

函数式组件SecondExample

import {connect} from "umi";const SecondExample = (props:any) =>{console.log(props.Model_SecondExampleModel)const clickTry = (props:any) =>{if (props.dispatch){props.dispatch({//路径：model的namespace+effects函数名type: 'Model_SecondExampleModel/getListFromServicesEffects',payload: {callback: (value: any) => {console.log(value);},},})}console.log(props.Model_SecondExampleModel)}return (
()=>{clickTry(props)}}>SecondExample
);
}
//连接的参数名必须是model的namespace
export default connect(({ Model_SecondExampleModel }: any) => ({Model_SecondExampleModel,
}))(SecondExample);