Umi3项目dva简单使用

Umi介绍

UMI 最初是蚂蚁金服内部使用的前端框架，随着其在内部的积累和发展，逐渐成为一个完整的前端开发框架。后来，蚂蚁金服决定将其开源，让更多的开发者可以使用和参与其中，同时也可以为蚂蚁金服的业务发展带来更多的技术创新和人才储备。因此，UMI 在 2018 年 10 月正式开源。

Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。Umi的状态库也是内置了DVA来帮助我们进行一些状态的管理，这里我们就不过多赘述了。

Umi dva

dva主要是通过model的概念来管理模型，主要包含state状态，同步来更新state的reducers，处理异步逻辑的effects，掌握了这三个概念已经足够我们使用了。

export const Modal = {
  namespace: 'modal',
  state: {
    name: '',
  },
  effects: {
    * queryName({ payload }, { call, put }) {
      try {
        const data = yield call(nameGet, { id: 123 });
        yield put({ type: 'changeName', payload: data });
      } catch (err) {
        yield put({ type: 'changeName', payload: '' });
      }
    },
  },
  reducers: {
    changeName(state, { payload }) {
      return { ...state,  name: payload };
    },
    clearAll(state) {
      return { name: '' };
    },
  },
}

这里我们放了一个简单的modal

namespace:表示在全局state上的key

state:初始值

reducers:等同于redux例的reducer，接受一个action来同步更新state

因为我们是在umi搭建的项目中使用的，umi内置了dva，不需要我们使用dva框架的connect函数来进行串联，也不需要我们在index.js里面来run，目录下的models会自动帮我们注册。

这里在effect里面有一些不同，在异步的修改数据时，需要我们通过effect来派发action到reducer，通过reducer来修改state，dva采用了generator的相关概念，把异步写法转成了同步写法；call主要用来调用异步逻辑，而put主要是用于触发action，需要注意的是，我们在effect里面put调用的时候，它会自己把namespace拼在前面，而我们在页面调用的时候，是需要把namespace放在前面的。

Demo

import React from 'react';
import { useSelector, useDispatch } from 'umi';

const Index = () => {
  const name: any = useSelector((state: any) => state?.name);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'modal/queryName',
      payload: {
         type: 'getName',
      }
    });
    return () => {
      dispatch({
        type: 'modal/clearAll'
      });
    }
  }, [])
  
  const changeName = () => {
    dispatch({
      type: 'modal/changeName',
      payload: '小明',
    });
  }
  
  return (
    <div>{name}</div>
    <button onClick={changeName}>修改name</button>
  )
}

export default Index;

这样就是一个简单的demo了，我们通过effect里面的queryName来拿到接口请求的name并且存储在state，通过changeName派发对应的action来修改state里面的数据，最后离开页面的时候，如果不需要保留的话，我们通过clearAll来对state进行一个数据的清理。