Dva.js中Subscription的理解和用法

官网是这样介绍的:

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

Subscription 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

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

其他人的博客这样介绍的:

model中的subscription相当于一个监听器,可以监听路由变化,鼠标,键盘变化,服务器连接变化,状态变化等,这样在其中就可以根据不同的变化做出相应的处理,在这个subsription中的方法名是随意定的,每次变化都会一次去调用里面的所有方法,所以一边会加相应的判断。

export default {
 
  namespace: 'example',
 
  state: {},
 
  subscriptions: {
    setup({ dispatch, history }) {  // 这里的方法名可以随便命名,当监听有变化的时候就会依次执行这的变化,这里的dispatch和history和之前说的是一样的
      window.onresize = () => {   //这里表示的当浏览器的页面的大小变化时就会触发里面的dispatch方法,这里的save就是reducers中的方法名
        dispatch (type:"save")  
      }
    },
 
    onClick ({dispatch}) {
      document.addEventListener('click',() => {   //这里表示当鼠标点击时就会触发里面的dispatch命令,这里的save就是reducers中的方法名
        dispatch (type:"save")
      })
    }
  },
 
  setupHistory({dispatch,history}){
    history.listen((location) => {
      console.log(location)   //这里可以获取当前变化的history路径以及参数,hash所有值,这样就可以在路由地址变化后做处理
      ....
    })
  }
 
  effects: {
    *fetch({ payload }, { call, put,select }) {  // eslint-disable-line
      yield put({ type: 'save' });
    },
  },
 
  reducers: {
 
    save(state, action) {
      return { ...state, ...action.payload };
    },
  },
 
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容