使用dva中的subscriptions

最新推荐文章于 2024-11-06 17:43:54 发布

转载最新推荐文章于 2024-11-06 17:43:54 发布 · 654 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kianyin/p/9293639.html

文章标签：

#网络

本文介绍DVA框架中的Subscriptions特性，该特性允许开发者订阅数据源，并根据数据变化触发Action更新应用状态。示例包括如何监听浏览器历史记录变动及键盘事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dva - subscription

=======

Subscriptions 是一种从源获取数据的方法，它来自于 elm。

Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。

数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

监听history

setup({ dispatch, history }) {
    history.listen((location) => {
    const match = pathToRegexp('/map/machineMapInProject/:id').exec(location.pathname);
        if (match) {
            const id = match[1];
            dispatch({
                type: 'updateStateProps',
                payload: {
                    name: 'listParams',
                    value: { project: id },
                },
            });
        }
    });
},

监听key事件

import key from 'keymaster';
...
app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent(dispatch) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  }
});

相关源码片段

/packages/dva-core/src/subscription.js

export function run(subs, model, app, onError) {
  const funcs = [];
  const nonFuncs = [];
  for (const key in subs) {
    if (Object.prototype.hasOwnProperty.call(subs, key)) {
      const sub = subs[key];
      const unlistener = sub({
        dispatch: prefixedDispatch(app._store.dispatch, model),
        history: app._history,
      }, onError);
      if (isFunction(unlistener)) {
        funcs.push(unlistener);
      } else {
        nonFuncs.push(key);
      }
    }
  }
  return { funcs, nonFuncs };
}

subscription的方法签名为({dispatch, history}, onError)。

参考文章：http://le0zh.github.io/2017/09/25/dva-model-subscriptions/

转载于:https://www.cnblogs.com/kianyin/p/9293639.html