dva + react hooks实战Demo

前言

dva 是一款轻量级的应用框架,是阿里旗下的开源产品.dva是基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch.写过原生redux代码的同学应该体会的到,redux里面充斥着大量的样板代码,对开发者而言使用体验十分的不友好.而dva将这些繁杂的工作封装到了底层去实现,开发者只需要调用它提供的几个简单Api就能实现完全相同的功能,从而大大的提升了开发效率.

本篇博文将从实战的角度将dva和目前流行的react hooks相结合开发一款Demo应用,在实际开发中去体会dva的使用方法和其带来的变化.

dva官方文档

Demo源代码

 

需求分析

Demo最终效果:

                                          

 

• Demo总共有三张页面:首页,商品详情页和登录页.

• 首页有"猜你喜欢"和"今日推荐"两个数据列表.数据从服务器端获取并渲染出来.

• 点击列表项会获取到商品id进入到商品详情页面并展现出商品的详细信息.

• 点击头部的登录按钮会进入登录页面,用户登陆后会持久化保存登录状态.

 

Dva概念简述

 

1.Dav项目结构描述

                                                                         

• 按照官网文档的步骤下载完项目,它的结构如上图所示.
• assets是静态资源文件夹,components放置一些全局组件
• routes里面创建具体的页面.services里面编写请求后台数据接口的函数
• utils下面的request.js是dva内部对fetch做的封装
• index.js是应用的入口,router.js是路由文件

• models文件夹是开发环节中最核心的部分,它里面主要编写状态处理的逻辑.以前我们编写redux的代码现在全部都放在        models里面去编写.

 

2.models文件描述

1.如果想新建一个页面,首先在routes文件下面创建HomePage编写好样式代码,随后在router.js中注册路由,如此该页面就能通过url访问了.如果我们想将页面的状态放到redux中管理,需要在models下面创建一个home.js.

import { getList } from "../services/api";
export default {
      namespace: 'home', 
      state: {
          likes:null,
          recommends:n