dva Subscriptions 的使用

落日映苍穹つ 2022-02-19 13:57 239阅读 0赞

### dva Subscriptions 的使用 ###

*   *  history例子
     *  socket例子
     *  keyboard 输入
     *  总结

## history例子 ##

subscriptions: { 
        setup({  dispatch, history }) { 
          history.listen(({  pathname }) => { 
            if (pathname === '/users') { 
              dispatch({ 
                type: 'users/fetch',
              });
            }
          });
        },
      },

## 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'
            })
        })
    }

## keyboard 输入 ##

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

## 总结 ##

1.  subscriptions 只是定义了一个地方，用来订阅数据。 subscriptions函数会有入参dispatch和history
2.  具体要怎么订阅或是监听,都需要第三方的类库来实现或者自己手动在subscriptions函数去写这个触发逻辑,  
    比如上面的socket的例子
3.  dispatch 应该是redux的store中的dispatch ，history 应该是 react-router中的history

thanks