dva入门指北

Posted on

DvaJS的使用技巧

  • 接到需求之后推荐的做法不是立刻编码，而是先以上帝模式做整体设计。
  1. 先设计 model
  2. 再设计 component
  3. 最后连接 model 和 component
  • 各步骤基本操作

  1. 新建Model，可理解为一个数据仓库

    • namespace 表示在全局 state 上的 key（要求唯一，可理解为数据仓库的名字）

    • state 是初始值，在这里是空数组（仓库里存到数据）

      • reducer 是一个函数，接受 state 和 action，返回老的或新的 state 。即：(state, action) => state

    • reducers 接收 action，同步更新 state

    • Effect也是 Action 处理器，处理异步动作

      • effect 函数内部的处理函数，比较常用的是 call 和 put

        • call：执行异步函数，支持 promise

        • put：触发 Action，类似于 dispatch

        • select： 用于从 state 里获取数据

          1
          const todos = yield select(state => state.todos);

    • Action 是用来描述 UI 层事件的一个对象。

      1
      { type: 'click-submit-button', payload: this.form.data }

    • subscriptions 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action

  1. 在想使用的View里connect想要使用的Model

    • connect是一个函数，绑定 State 到 View。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      // 官方示例（有点过时）
      import { connect } from 'dva';

      // todos是要使用的model的namespace
      // 前面的todos会变为该View的
      function mapStateToProps(state) {
        return { todos: state.todos };
      }
       connect(mapStateToProps)(App);

    • 被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。

      dispatch用来调用effect，而effect用来更改state