美文网首页
Dva属性讲解

Dva属性讲解

作者: Leanisme | 来源:发表于2018-11-16 09:48 被阅读0次

    Model:

    model是dva最重要的概念,以下是经典的例子:

    app.model({
      namespace: 'todo',
        state: [],
      reducers: {
        add(state, { payload: todo }) {
          // 保存数据到 state
          return [...state, todo];
        },
      },
      effects: {
        *save({ payload: todo }, { put, call }) {
          // 调用 saveTodoToServer,成功后触发 `add` action 保存到 state
          yield call(saveTodoToServer, todo);
          yield put({ type: 'add', payload: todo });
        },
      },
      subscriptions: {
        setup({ history, dispatch }) {
          // 监听 history 变化,当进入 `/` 时触发 `load` action
          return history.listen(({ pathname }) => {
            if (pathname === '/') {
              dispatch({ type: 'load' });
            }
          });
        },
      },
    });
    

    Model包括五个属性:

    namespace:

    model的命名空间,同时namespace也是在全局state上的属性,只能用字符串,不支持通过.的方式创建多层命名空间。
    type:String

    state:

    State是整个应用的数据层。应用的state被存储在一个object tree中。应用的初始state在model中定义,也就是说,由model state组成全局state。操作的时候每次都要当作不可变数据(immutable data)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

    reducers

    以key/value的格式来定义reducer。用于处理同步操作,唯一可以修改state的地方,由action触发。格式为:(state, action) => newState 或者 [(state, action) => newState, enhancer]
    他接收参数 state 和 action,返回新的 state,通过语句表达即 (state, action) => newState,所以不存在自加操作。该函数把一个集合归并成一个单值。

    Reducer 的概念来自于是函数式编程,在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。
    注意:Reducer函数必须是纯函数。

    effects:

    以key/value格式定义effect。用于处理异步操作和业务逻辑,不直接修改state。由action触发,可以触发 action,可以和服务器交互,可以获取全局 state 的数据等等。

    subscriptions:

    Subscriptions 表示订阅,用于订阅一个数据源,然后按需 dispatch action。格式为 ({ dispatch, history }) => unsubscribe 。比如:当用户进入 /y/monthCard/list 页面时,触发 action query 加载数据。
    如果 url 规则比较复杂,比如 /users/:userId/search,那么匹配和 userId 的获取都会比较麻烦。这是推荐用 path-to-regexp 简化这部分逻辑。

    相关文章

      网友评论

          本文标题:Dva属性讲解

          本文链接:https://www.haomeiwen.com/subject/bzepfqtx.html