您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

DvaJs:React数据流解决方案

DvaJs:React数据流解决方案

摘要

本文最终想要达到的目的是掌握DvaJs的使用,从起源开始讲起。文章内容借鉴了阮一峰博客与各技术官网。

Flux篇

Fulx是什么?

Flux 是一种架构思想,专门解决软件的结构问题。它跟MVC架构是同一类东西,但是更加简单和清晰。

为什么要有Flux架构?因为15年Facebook的React火了,但是React有它的缺点,React本身只涉及UI层,搭建大型的前端项目时,只用React就不够用了,必须要有前端框架。不然会出现代码杂乱无法管理,代码重复等问题。
所以Facebook提出了Flux架构,用来管理前端项目结构与项目数据流动。它的具体作用还要看他的实现框架(Flux有很多实现方式,Redux就是其中一种)。

Flux的基本概念

Flux将一个前端应用分为四个部分:

  1. View: 视图层
  2. Action(动作):视图层发出的消息(比如mouseClick)
  3. Dispatcher(派发器):用来接收Actions、执行回调函数
  4. Store(数据层):用来存放应用的状态,一旦发生变动,就提醒Views要更新页面

Flux 的最大特点,就是数据的"单向流动"

  1. 用户访问 View
  2. View 发出用户的 Action
  3. Dispatcher 收到 Action,要求 Store 进行相应的更新
  4. Store 更新后,发出一个"change"事件
  5. View 收到"change"事件后,更新页面
    任何相邻的部分都不会发生数据的"双向流动"。这保证了流程的清晰

如图:

图片可见阮一峰博客(http://www.ruanyifeng.com/blog/2016/01/flux.html)

详情见阮一峰博客:http://www.ruanyifeng.com/blog/2016/01/flux.html

Generator

dva基于redux和redux-saga,redux不能解决异步回调的问题,所以出现了redux-sage来解决异步回调,而redux-sage是基于Generator的,所以了解dva之前还需要了解ES6推出的Generator。

介绍

Generator是一种函数,有两个区分它和普通函数的地方

  1. function关键字后面,函数名之前,有个*
  2. 函数内部有关键字yield
function* hello(){
    console.log("first time");
    yield '1';
    console.log("second time");
    yield '2';
    console.log("third time");
    yield '3';
}

直接调用Generator函数,不会被执行,我们需要这样去调用。

let h=hello();
h.next();  //输出‘first time’  {value: "1", done: false}
h.next();  //输出‘second time’  {value: "2", done: false}
h.next();  //输出‘third time’  {value: "3", done: true}
h.next();  //输出{value: undefined, done: true}

Generator每次执行到yield关键字后就会停下,yield相当于函数的return关键字,返回一个IteratorResult对象,该对象包含两个属性{value:string,done:boolean},value就是yield后面的值,done表示函数后面是否还有yield

DvaJs

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

基本介绍

dva是蚂蚁金服团队开发的框架,封装了redux、react等,并没有引入任何新概念。

dva的一些概念

  • state:model的状态数据
  • action:修改state的动作
  • dispatch:发送action的函数,将action发送给state
  • reducer:同步函数放在这里,同步函数可以直接修改state
  • effect:异步函数放在这里,异步函数不能直接修改state
  • Subscription:监听路由,路由发生变化时,可以做一些事情
  • request:请求后端的函数

主要调用流程

页面=>model=>service

  • 页面中使用dispatch调用model,一般是调用model中的effects,也有可能调reducer
  • model中包含reducer、effects、subscription。一般的调用顺序是effect调用service中的函数,获取到数据,然后调用reducer中的函数,把获取的数据传给reducer,由reducer去修改state.
  • reducer因为要直接修改state,所以它一定要返回数据
  • 页面与model没有直接的关联,要在connect中连接起来
    页面中使用dispatch
/**
 * 连接model与组件后,将model中的数据传给组件
 * 组件中可以使用this.props获取
 * @param state reduce中的函数返回的state
 * @returns 返回一个对象,该对象中的值,可以直接在上面的组件中使用。(this.props)
 */
const mapStateToProps = (state) => {
  console.log(state);
  return {
    ...state,
  }
}


//这种连接方式是redux的连接方式,好像可以使用注解的方式,待了解。
export default connect(mapStateToProps)(Index);

model中定义reducer effect

import { Effect, ImmerReducer, Reducer, Subscription } from 'umi';
import { getRemoteList} from './service';


const IndexModel: IndexModelType = {
  namespace: 'users',
  state: {
    tableData: [],
    result:{}
  },

  effects: {  
  //effects中的函数的参数为(action:{payload},effects:{put,call}),有时会简写为({payload},{put,call})
    *getTest(action, effects) {
      const serviceData=yield effects.call(getRemoteList,{currentPage:1,pageSize:5})
      yield effects.put({
        type:'get',
        payload:{
          tableData:data,
          result:serviceData,
        },
      })
    },  
  },
  reducers: {
  //state是当前状态数据,action包含两个属性{type,payload},type几乎不用,所有有时会写为get(state,{payload})
    get(state, {payload}) {  
      let _state={...state};
      // _state=action.payload;
      //返回的数据比较讲究,必须包含state中的数据,如果不包含所有,也可以,只是ts会报错
      return {
        ...payload,
      };
    },
    // 启用 immer 之后
    // save(state, action) {
    //   state.name = action.payload;
    // },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname }) => {
        if (pathname === '/') {
          dispatch({
            type: 'query',
          });
        }
      });
    },
  },
};

export default IndexModel;

service中定义request,request请求后端

umi内部提供两种方式请求后端umi-request和request
这里使用request(因为umi-request更高深) request文档见这里

请求后端都是异步函数,定义异步函数的两种方式:

  • async function function_name(){}
  • const name = async ()=>{}
import request, { extend } from 'umi-request';
import { message } from 'antd';
import BASE_API from '@/myConfig/base_api';

export const getRemoteList = async ({
    currentPage,
    pageSize,
  }) => {
    return request(
      `${BASE_API}/checkInfo/6/0/${pageSize}/${pageSize}`,
      {
        method: 'get',
      },
    )
      .then(function(response) {
        return response;
      })
      .catch(function(error) {
        return false;
      });
  };

这是基本的reuest,下面是加了异常处理的request,再把这个异常处理重构出去,就成了统一异常管理

import request, { extend } from 'umi-request';
import { message } from 'antd';
import BASE_API from '@/myConfig/base_api';

const errorHandler = function(error: any) {
    if (error.response) {
      if (error.response.status > 400) {
        message.error(error.data.message ? error.data.message : error.data);
      }
    } else {
      //请求已经发送但是没有回应
      message.error('网络不佳,请稍后再试!');
    }
  
    throw error; // If throw. The error will continue to be thrown.这里可以看一下
  
    // return {some: 'data'}; If return, return the value as a return. If you don't write it is equivalent to return undefined, you can judge whether the response has a value when processing the result.
    // return {some: 'data'};
  };

const extendRequest = extend({ errorHandler });
export const getRemoteList = async ({
    currentPage,
    pageSize,
  }: {
    currentPage: number;
    pageSize: number;
  }) => {
    return extendRequest(
      `${BASE_API}/checkInfo/6/0/${pageSize}/${pageSize}`,
      {
        method: 'get',
      },
    )
      .then(function(response) {
          console.log("成功");
        return response;
      })
      .catch(function(error) {
        console.log("失败");
        return false;
      });
  };

其他

tsx、jsx、ts文件的区别

  • 使用了TypeScript的js文件就叫ts文件
  • 使用了Jsx语法的js文件就叫jsx文件
  • 使用了TypeScript和Jsx语法的js文件就叫tsx文件

函数参数

dva中很多函数的参数都是一个对象,对象中有多个属性,所以有多种写法:

function(A,B)  //B对象中包含c属性和d属性
function(A,{c,d})
function(A,{d})

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进