Dva: Subscriptions能否补充一些例子或者文档呢?

Created on 19 Oct 2016  ·  17Comments  ·  Source: dvajs/dva

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

木有明白这setup、keyEvent是从哪来的,如果websocket或者其他的什么该怎么写。

question

Most helpful comment

尝试了一下socket,仅供参考。

// model

import * as service from '../services/socket';

subscriptions: {
    socket({dispatch}){ // socket相关
        return service.listen(data => {
            switch (data.type) {
                case 'connect':
                    if (data.state === 'success') {
                        dispatch({
                            type: 'connectSuccess'
                        })
                    } else {
                        dispatch({
                            type: 'connectFail'
                        })
                    }
                    break;
                case 'welcome':
                    dispatch({
                        type: 'welcome'
                    });
                    break;
            }
        })
    }
},

// services

import io from 'socket.io-client';

let socket = '';

export function listen(action) {
    if (socket === '') {
        try {
            socket = io("localhost:3000");
            action({
                type: 'connect',
                state: 'success'
            });
        } catch (err) {
            action({
                type: 'connect',
                state: 'fail'
            });
        }
    }
    socket.on('welcome', () => {
        action({
            type: 'welcome'
        })
    })
}

All 17 comments

那就是说,这个key只是用于帮助开发者自己标记此处是某一类功能,只是传入dispatch和history,而具体的监听代码是需要具体的第三方库来实现监听的。

我的理解是否是正确的呢?

是的,这里用 key/value 的格式,目前主要是为了和 effects 和 reducers 保持格式一致,之后会支持 subscriptions 取消的功能,key 就会用上了。

了解了,谢谢。
不过我觉得可以在这几个文档里添加以上讨论中的含义,可能会遇到和我一样的问题呢:)

subscriptions 只是定义了一个地方,用来订阅数据。 然后会传递dispatch和history,具体要怎么订阅或是监听都需要第三方的类库来实现。是这么理解吗? dispatch 是redux的store中的dispatch ,history是 react-router中的history,是这么理解吗?

@roc2539 是的。

subscriptions 里的 setup 中如果要访问 state 或者 props 的内容可以吗?

@gzbigegg 不可以,触发 action 让 effect 去处理。

subscriptions: {
    setup ({ dispatch }) {
      dispatch({ type: 'query' })
    }
}

有两个疑问,不知道是否正确,文档里说得elm一直没接触过,对subscriptions理解的不是很清楚。

  1. 传入history,执行history.listen后,会在路由变化时触发,不知道理解是否正确。
  2. 只传入dispatch的订阅,都会在什么时候被触发?

很希望看到一些websocket之类的subscription example

在setup中如何disptch两个action呢

subscription 注册的回调 调用时机 和 注入参数 没有明确的文档 @roc2539 可以解答一下吗?

改成hash路由之后,setup无法监听到来自键盘输入的url的变化。
而使用 browserHistory 则可以。

 setup ({ dispatch }) {
      console.log('models-app') // 手动改变url地址,不会进此方法
      dispatch({ type: 'query' })

    },

尝试了一下socket,仅供参考。

// model

import * as service from '../services/socket';

subscriptions: {
    socket({dispatch}){ // socket相关
        return service.listen(data => {
            switch (data.type) {
                case 'connect':
                    if (data.state === 'success') {
                        dispatch({
                            type: 'connectSuccess'
                        })
                    } else {
                        dispatch({
                            type: 'connectFail'
                        })
                    }
                    break;
                case 'welcome':
                    dispatch({
                        type: 'welcome'
                    });
                    break;
            }
        })
    }
},

// services

import io from 'socket.io-client';

let socket = '';

export function listen(action) {
    if (socket === '') {
        try {
            socket = io("localhost:3000");
            action({
                type: 'connect',
                state: 'success'
            });
        } catch (err) {
            action({
                type: 'connect',
                state: 'fail'
            });
        }
    }
    socket.on('welcome', () => {
        action({
            type: 'welcome'
        })
    })
}

服了 一直在找到底怎么触发一个指定key的subscription,原来初始化的时候全都都会执行一遍的,所以这个subscriptions只是提供了dispatch和history的闭包而已😄

subscriptions: {
setup ({ dispatch }) {
dispatch({ type: 'query' })
}
} 这里只是初始时候执行一个dispatch动作而已, 实际并不做订阅动作。

恍然大悟

Was this page helpful?
0 / 5 - 0 ratings