简单描述
1 Dva 可认为是一个 CLI, 来搭建一个 React 项目
2 Dva 核心是提供一个, 基于 redux 和 redux-saga 的, 便于操作的数据流方案
3 学习点 -> "数据流方案" + "数据请求库 fetch"
4 https://gitee.com/Fzzhang_wei/dva-hh
5 https://www.bilibili.com/video/BV1s7411v73j?p=1
基础目录结构
┏━ mock
┣━ public
┣━ src
┣━ odels
┣━ routes
┣━ services
┣━ utils
┣━ router.js
┣━ services
┗━ .webpackrc
路由配置
1 新建单文件组件位置: routes/A1.js
2 路由配置文件: src/router.js
+ import A1 from "./routes/A1"
+ <Route path="/a1" exact component={A1}/>
基础 API
1 跳转标签
+ import {Link} from 'dva/router'
+ <Link to="/"> 首页</Link>
2 高阶组件
+ import {withRouter} from 'dva/router'
+ this.props.history.push("/")
+ export default withRouter(A1)
Dva 数据流
1 基本理解
1 单个 model 仓库文件: state + 同步数据处理(reducers) + 异步数据处理(effects) + 全局计算属性(subscriptions)
2 每个 model 仓库文件, 都是一个独立的命名空间, 有自己的空间命名
3 同步数据处理(reducers) -> 用于操作该 model 仓库的本地数据 (state)
4 异步数据处理(effects) -> 用于调接口 / 调 reducers 中的方法去操作 (state)
5 model 仓库 和 单文件组件, 都可以调用数据接口
6 如果是某个单文件组件的独有数据, 那么再组件内调用数据接口就 OK
7 如果是多个组件都, 需要去使用, 需要去调用的数据接口, 那么就在 model 仓库中调用数据接口就 OK
2 核心文件
1 models/xx.js
2 src/routes/xx.jsx
3 环境配置
1 /src/index
2 /.webpackrc
3 /src/utils/request.js
4 /src/services/example.js
Mock 数据
1 描述: 有时候在前端开发中, 后端没有及时的提供数据接口, 我们拿不到数据怎么办 "mock 就是我们前模拟的假数据"
2 操作流程
1 /mock/testMock.js
2 /.roadhogrc.mock.js
3 /src/services/examole.js
过渡组件 dva-loading
1 简单描述:
1 本质作用: dva-loading 只是提供"当前"异步加载方法的状态
2 当前异步加载方法: loading.effects['user/query']
3 loading 在异步请求发出那一刻, 就会持续监听, 该异步请求方法的状态
4 在异步请求结束之前 isLoading 的值一直是 true
5 当此次异步请求结束时 isLoading 的值变成 false, 同时 loading 对象停止监听
2 代码范式
1 配置: /src/index.js
import createLoading from 'dva-loading'
const app = dva()
app.use(createLoading())
2 单文件组件 xx.jsx
export default connect( state => ({ app: state.app, loading: state.loading }) )(A1)
export default connect( ({ app, loading }) => ({ app, loading }) )(A1)
1 loading.effects['user/query']
2 loading.global