前端-Umi Dva使用

Umi Dva入门使用，含详细解释

view和model的关系图

model属性

model主要有 namespace state reducers effects subscription5个主要属性。

namespace：定义model名，如果没声明，会以文件名作为namespace。

state：model 的状态。

reducers：reducer 是 Action 处理器，用来处理同步操作。如果不需要调接口时候，我们前台传递的 action 可以直接调用 reducers 里的方法。必须返回一个新的state，否则不会自动更新页面。

effects： Effect用来处理异步操作。内部是一个 Generator 函数，使用 yield 关键字，标识每一步的操作。dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。

• call：执行异步函数，比如发送请求
• put：发出一个 Action，类似于 dispatch

subscriptions：相当于一个监听器，可以监听路由的变化、鼠标、键盘、服务器连接变化等。subscriptions的方法会自动初始化(执行一遍)。

model基本结构

export default {
  namespace: 'myglobal', // 定义model名，如果没声明，会以文名件作为namespace
  state: {obj: []}, // 该 model 当前的状态
  // reducer 是 Action 处理器，用来处理同步操作。如果不需要调接口时候，我们前台传递的 action 可以直接调用 reducers 里的方法。
  reducers: {
    /**
     * queryEnd方法名自定义
     * @param {Object} state 旧的state
     * @param {Object} payload 存放在 action 里面的数据
     * @param {String} propsName 字段名
     * @return {Object} 新的state。（直接重新return一个新的state会丢弃旧的state，所以为了保留旧的state，一般会解构旧的state再合并新的state）
     */
    queryEnd(state, { payload, propsName }) {// 第二个参数为 action = {type,payload}
      return { ...state, [propsName]: payload };
    }
  },
  // Effect用来处理异步操作。内部是一个 Generator 函数，使用 yield 关键字，标识每一步的操作。
  // 如果需要调取接口的话，前台页面就需要调用 effects 里的方法。将数据取出来，再传递给 reducers 里的方法进行数据操作和同步 state。
  effects: {
    /**
     * queryResolved方法名自定义
     * @param {String} propsName 保存在state中的字段名
     * @param {Object} payload 存放在 action 里面的数据
     * @param {function} callback 回调函数
     * @param {function} call dva提供处理异步任务 (与后台服务端接口进行交互)
     * @param {function} put dva提供用来发出action (action可以是异步的effects、同步的reducers)
     * @param {function} select dva提供调用其他model层的state
     * @return {null} 无返回
     */
      *queryResolved({ propsName, payload, callback }, { call, put, select }) {
      try {
        const response = yield call(queryResolvedFetch, payload); // 第一个传参：后台服务器接口对应的名称。第二个参数：入参。
        const homeName = yield select(state => state.home); // 这样我们就可以取到名为 home 的 Model 层里面的 state 数据了。
        yield put({
          type: 'queryEnd',
          payload: response.data.records,
          propsName: propsName
        });
        if (callback) callback(response.data.records);
      } catch (e) {
        console.log('queryResolved异常:', e);
      }
    }
  },
  // subscriptions相当于一个监听器，可以监听路由的变化、鼠标、键盘、服务器连接变化等。subscriptions的方法会自动初始化(执行一遍)。
  subscriptions: {

    setup({ dispatch, history }) {
      console.log('setup');
      window.onresize = () => {   //这里表示的当浏览器的页面的大小变化时就会触发里面的dispatch方法，这里的save就是reducers中的方法名
        dispatch({ type: 'save' })
      }
    },
    onClick ({dispatch}) {
      console.log('onClick');
      document.addEventListener('click',() => {   //这里表示当鼠标点击时就会触发里面的dispatch命令，这里的save就是reducers中的方法名
        dispatch ({ type: 'save' })
      })
    }
  },
};

使用connect将Route页面与Model state 进行绑定

connect是dva提供的api，但在umi3也可以这样导入：import { connect } from “umi”;

import React, { useEffect } from "react";
import { connect } from "umi";

function IndexPage(props) {
  useEffect(() => {
    props.dispatch({
      type: `myglobal/getList`,
      payload: { page: 1, size: 5 },
    });
  }, []);

  return (
    <div></div>
  );
}

IndexPage.propTypes = {};

export const mapStateToProps = ({myglobal}) => {
  return { myglobal }; // myglobal 是 Model 层里面的 namespace
};
export default connect(mapStateToProps)(IndexPage);

使用useSelector将Route页面与Model state 进行绑定

import React, { useEffect } from "react"
import { shallowEqual } from 'react-redux'
import { useDispatch, useSelector } from "umi"

export default function IndexPage(props) {
  const dispatch = useDispatch();
  const commomState = useSelector((state) => {
    return state.myglobal;
  },shallowEqual);
  
  useEffect(() => {
    setTimeout(() =>{
      dispatch({
        type: "myglobal/queryEnd",
        payload: {obj: []}
      })
    }, 3000)
  }, [])

  const count = (date) => {
    console.log('count', commomState, date);
  }

  return (
    <div>
      <h1>Page index</h1>
      <h2>{count(new Date().getTime())}</h2>
      <h3>{new Date().getTime()}</h3>
    </div>
  );
}

useSelector和shallowEqual

useSelector：从umi导出的useSelector实质是react-redux的api，默认使用===做浅比较，第二个参数是一个函数用于自己实现比较逻辑(返回true不刷新组件，返回false刷新)。
shallowEqual：react-redux提供的api，用于优化组件重新渲染的次数。

初始化		改变后的值			是否加shallowEqual	是否刷新组件
111			111					否					否

{}			{}					否					是
{}			{}					是					否
{}			{test: "test"}		是					是
{}			{test: "test"}		否					是

{obj: "aaa"} {obj: "aaa"}		是					否
{obj: "aaa"} {obj: "bbb"}		是					是
{obj: []}	{obj: []}			是					是
{obj: {name: "aaa"}} {obj: {name: "aaa"}} 是		是


[1,2]		[1,2]				否					是
[1,2]		[1,2]				是					否
[1,2]		[2,2]				是					是

总的来说：
useSelector默认会比较引用
shallowEqual第一层是值比较，第二层会比较引用