浅学dva

dva概念

基本概念

为了简化react开发 使用的脚手架
dva = React-Router + Redux + Redux-saga

数据流图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZa2AocF-1656593590480)(C:\Users\李大圆\Desktop\react学习总结\image-20220630154645060.png)]

dva代码流水线

dva 开发个product组件
第一步 创建路由 dva路由的概念是组成应用的不同页面, so 路由==页面。在route文件夹写product的js,返回product的ui
第二步 添加路由信息到路由表 编辑src下的router.js 将第一步路由信息引入
第三步 编写可复用的ui组件(多个页面分享 UI 元素 (或在一个页面使用多次)) 
第四步 定义Model
第五步 在index.js载入Model (app.model(require('./models/product').default))
第六步 使用connect串联model和component

Router

位置:src下 index.js引入router.js  router.js  这个就是前端路由 网址 
app.router(require('./router').default);
  <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/products" exact component={Products} />
      </Switch>
    </Router>

Route Component

以页面为维度的组件
通常connect Model的组件都是React Component.
通常存在/routes/目录下
/components/目录下的是纯组件（别人复用的组件）

Model

model的概念 主要用来处理数据和逻辑
dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。
State =>model的状态数据 通常是个对象 不可变数据 每次变化之后都是全新的state
Action =>Action就是个对象,改变state唯一途径,注意点:dispatch 是在组件 connect Models以后，通过 props 传入的
dispatch=>触发action的函数，改变state唯一途径。
Reducer=>接收state和action 返回一个新的state 归并 这是一个纯函数 同样的输入对应同样的输出 与视图对应
Effect=>副作用 常用于异步操作 同样的输入不同样的输出
Subscription=>用于订阅一个数据源，然后根据条件 dispatch 需要的 action。

call和input

是effect函数内部的处理函数
call 执行异步任务
put 发出一个action 类似dispatch

connect方法

是一个函数 绑定state到view