關於socket.on回調的調度行爲（）

所以基本上我得到了這個套接字，這正在正確地發送給我'新訂單'的消息。關於socket.on回調的調度行爲（）

我使用的是REDX，我想調度一個動作，而不是減速器會得到它，我的商店將被更新。但是這個代碼並沒有做任何事情！

socket.on('new order', (order) => {  
    return (dispatch) => { 
     dispatch(socketNewOrder(order)); 
    } 
});

這裏是我的行動，這是位於同一個文件：

export const socketNewOrder = (order) => { 
    return { 
    type: 'SOCKET_NEW_ORDER', 
    payload: order 
    } 
}

我也試圖打電話給我的動作是這樣的：

socket.on('new order', (order) => {  
    socketNewOrder(order));   
});

它叫做動作確實，但是我的減速器沒有「聽到」這個動作！ :(

我聽說過一些，使用中間件，但我無法弄清楚如何做到這一點。

任何人都可以解釋我如何使用中間件派遣行動，因爲我收到套接字協議的消息，爲什麼我的代碼不能正常工作？謝謝，對不起新手questio

來源

2017-04-12 Amanda Siqueira

您正在返回一個永遠不會從您的套接字事件處理程序調用的函數。你期望做什麼？而且，由於該函數從未被調用過，所以'dispatch（）'函數永遠不會被調用。你只是想這麼做：'socket.on（'new order'，（order）=> {dispatch（socketNewOrder（order））; }）;'？ – jfriend00

如果我這樣做，它說調度不是一個功能！ –

那麼什麼是'dispatch（）'？ – jfriend00

的一點是，你需要在你的插座事件監聽器訪問dispatch。使用中間件創建從外部事件源的動作是一個有效的模式。

const socketMiddleware = (store) => { 
    // We have access to store, add socket listeners 
    socket.on('new order', (order) => {  
    store.dispatch(socketNewOrder(order)); 
    }); 

    // Actual middleware implementation just passes all 
    // actions through without touching them 
    return (next) => (action) => { 
    next(action); 
    } 
}

來源

2017-05-10 06:52:03 OlliM

這個中間件的實現硬編碼的事件名稱。另外在哪裏被引用的套接字實例。在存儲arg之前將套接字實例作爲參數傳遞給中間件調用會更好嗎？ – therewillbecode

此代碼應爲你工作：

export const socketNewOrder = (order) => { 
    return { 
    type: 'SOCKET_NEW_ORDER', 
    payload: order 
    } 
} 

const handlerFunc = (dispatch) => (order) => { 
    dispatch(socketNewOrder(order)); 
    } 
}); 

socket.on('event', handlerFunc(dispatch)); 
// make sure the stores dispatch method is within scope

說明

事件處理函數被正確分解爲一系列的功能。但是，這些功能的順序是錯誤的。

socket.on('new order', (order) => {  
    return (dispatch) => { 
     dispatch(socketNewOrder(order)); 
    } 
});

這是該系列功能，使您的事件處理函數正確的順序：

socket.on('new order', (dispatch) => {  
    return (order) => { 
     dispatch(socketNewOrder(order)); 
    } 
});

以正常的方式看起來就像綁定一個處理函數到一個插座。

socket.on('event', handlerFunc)

所以處理函數只會在事件觸發時調用。

如果我們需要在事件觸發時調用handlerFunc時綁定handlerFunc，那麼這對我們不起作用。

但是我們可以通過使用稱爲的函數式編程技術來解決這個問題，該函數允許我們將事件處理程序處理程序函數分解爲一系列可以在以後逐漸調用的函數。

柯里是當你打破一個函數，有多個參數成一系列採取的參數的一部分功能。

套接字事件有兩個重要的時間點。

處理函數綁定到Socket實例
的處理函數被調用

我們有機會獲得終極版商店的調度方法在時間點之一，但不是在時間點2 。柯里讓我們可以「儲存」時間點二的調度方法。

所以我們可以做的是調用一個調度函數返回我們的handlerFunction。

function handlerFunc(order){ 
    dispatch(socketNewOrder(order)); 
} 

function passDispatch(dispatch){ 
    return handlerFunc 
}; 

socket.on('event', passDispatch(dispatch));

所以雖然這看起來很奇怪，但它的結果與第一個例子完全相同。通過currying，雖然事件處理程序將在稍後的時間點被調用，但我們仍然可以調度操作，因爲我們可以訪問調度變量。

我們可以使用中間件來減少每次綁定時重複處理函數的次數。

來源

2017-05-10 10:06:40 therewillbecode

關於socket.on回調的調度行爲（）

回答

相關問題