Redux + Websockets：爲什麼使用中間件來管理這個？

我一直在閱讀關於將WebSocket集成到React/Redux應用程序的最佳方法，並且我找到了答案，但是沿着「websocket實現的最佳位置通常是中間件」的句子。Redux + Websockets：爲什麼使用中間件來管理這個？

我的問題是爲什麼這是首選？這樣做與設置外部應用程序級React容器（例如componentWillMount）中的websocket /聽衆分派操作有什麼好處？

這似乎就像在應用程序的整個生命週期持續期間等效，等等。我在這裏錯過了什麼？

來源

2017-09-25 kasceled

有幾個專家將這種邏輯放在中間件中而不是實際的組件中。
在我看來，主要的原因是：

每個連接的組件將實例化一個WebSocket否則你會需要，這將是獨立商店的連接的全局聲明，換句話說，不是的一部分流程圖如下：redux 流程。
中間商店有權訪問該商店並且是流量的一部分redux 流量。
您還可以訪問整個商店，因此您可以通過轉發更多數據，然後最初派送。
您將組件與網絡套接字邏輯分離，因此您可以集中您的代碼並重新使用組件。

總而言之，沒有什麼特別的理由可以說明中間件使用web-sockets，使用中間件通常具有很大的優勢。

編輯
作爲隨訪到您的評論

建議你將如何管理，你可能需要一個特定組件來初始化一個WebSocket連接，但要管理是否已經是一個案例連接，等等......它會像一樣簡單，因爲在商店中有一個標誌表示它已連接，或者是還有更好的方法嗎？

正如我所說，我不會初始化一個組件內的Web套接字連接，而是我會在我的應用程序的入口點執行它。例如index.js。
如果您的問題是確保在已有連接時不嘗試連接，那麼可以在創建store時初始化所有應用程序數據時調用該方法的簡單方法傳遞一個回調，通過dispatch進行渲染並更新store。
一個簡單的例子（記住，這是一個僞代碼）：

我們的編程入手方法：

export function socketStart(store, callback) { 
    // this is only a pseudo code! 

    // register to server -> client events 
    _socketClient.someFunction = (data) => { 
    store.dispatch({ type: "Server_Invoked_Some_Function", data }); 
    } 

    _socketClient.someFunction2 = (data) => { 
    store.dispatch({ type: "Server_Invoked_Some_Function2", data }); 
    } 

    // connect to the server via the web-socket client API 
    _socketClient.connect(() => callback()); 
}

我們可以在index.js文件中使用它：

let store = createStore(
    // your reducers here... 
    // ... 
    applyMiddleware(socketMiddleware) // our web socket middleware 
) 

// the callback will invoked only if the connection was successful 
// the React-Dom's render function is our callback in this case 
socketStart(store,() => { render(<App />, document.getElementById("root")); });

來源

2017-09-25 10:45:52

這都有道理，謝謝！這裏最大的原因似乎是，作爲中間件，它將可以訪問整個商店，使用頂級組件進行連接是不可用的（或者是奇怪的/架構上的奇怪）。你會如何建議管理一個案例，你可能想要一個特定的組件來初始化一個websocket連接，但想要管理它是否已經連接，等等......它就像在商店中有一個標誌一樣簡單它是連接還是有更好的方法？ – kasceled

首先，我不會初始化組件內的websocket連接，而是在我的應用程序的入口點執行它（例如'index.js'）。如果你關心的是確保當你已經建立連接時你不會嘗試連接，那麼當你創建'store'時調用一個簡單的連接方法，並且在它的回調函數中你可以渲染應用程序。我會用一個簡單的例子更新答案 –

使用中間件，您可以輕鬆地在Redux和Web Socket之間展開/中繼消息。此外，您可以使用不帶React的Redux中間件，這意味着您可以在服務器端代碼上使用Redux編寫API（可能使用Redux傳奇）。

我同意生命週期管理作爲React組件比Redux中間件更容易。但是如果你想重新連接（銷燬/重新創建），你需要使用key道具來讓調解者將它視爲一個新對象，這有點奇怪。

您可以看看，它將Web Socket消息展開成Redux操作，並將Redux操作中繼到Web Socket。

在您的Web套接字服務器，您發送的動作：

ws.on('connection', conn => { 
    conn.send(JSON.stringify({ 
    type: 'GREETING', 
    payload: { now: Date.now() } 
    })); 
});

你會得到你的終極版減速器GREETING行動。反之亦然，當你想傳遞給網絡插座一個動作，你標記你的行動meta.send與true：

this.props.dispatch({ 
    type: 'SIGN_IN', 
    meta: { send: true }, 
    payload: { authToken: '...' } 
});

來源

2018-01-24 04:40:25 Compulim

Redux + Websockets：爲什麼使用中間件來管理這個？

回答

相關問題