使用Websockets的Redux-thunk

Question

当某些组件想要订阅数据时，我想按需创建一个websocket。如何以redux方式共享websocket实例？

action.js

export function subscribeToWS(url) {
   return dispatch => {
      let websocket = new WebSocket(url)
      websocket.on('connect', () => {
         websocket.send("subscribe") 
      }
      websocket.on('message', (message) => {
        dispatch(storeNewData(message))
      }
   } 
}

我可以这样做，但这需要为每个新的订阅创建一个新的实例。

Answer 1

放置持久连接对象等内容的标准位置是在中间件内部。事实上，从字面上看，有几十个现有的中间件演示了这种方法，其中大多数都在https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware.md#sockets-and-adapters上列出。您应该能够按原样使用其中的一些，或者至少作为示例。

Answer 2

你可以看看redux-websocket-bridge。它将Web套接字消息展开为Redux操作，并将Redux操作传递给Web套接字。

这种方法的优点:您可以在服务器上使用Redux作为API端点，用更少的代码取代标准REST API。

此外，如果您的服务器不发送Flux Standard Action，您仍然可以将redux-websocket-bridge用于原始消息。它适用于string、ArrayBuffer和Blob。当然，你可以编写一个小的中间件来将它们转换成Flux标准操作，例如来自Slack RTM API的消息。

Answer 3

虽然到目前为止这是一个相当老的问题，但在寻找示例时它出现了几次。正如@matthewatabet和@abguy提到的那样，https://github.com/luskhq/redux-ws只是提到它已经被弃用，你可以使用Redux Thunk，而没有专门针对web套接字的示例。

为了将来参考，我找到了this article，它概述了一个示例，它是在Github repo中实现的，从this file开始。这是针对socket.io的，但是直接使用web套接字应该是类似的。

总结一下，在组件中使用addNewItemSocket调用dispatch

<RaisedButton
    label="Click to add!" primary={true}
    onTouchTap={ () => {
        const newItem = ReactDOM.findDOMNode(this.refs.newTodo.input).value
        newItem === "" ?  alert("Item shouldn't be blank")
                       :  dispatch(addNewItemSocket(socket,items.size,newItem)) 
                        {/*: dispatch(addNewItem(items.size,newItem))*/}
        ReactDOM.findDOMNode(this.refs.newTodo.input).value = ""
      }
    }
/>

在操作文件中，将addNewItemSocket声明为：

export const addNewItemSocket = (socket,id,item) => {
    return (dispatch) => {
        let postData = {
                id:id+1,
                item:item,
                completed:false
             }
        socket.emit('addItem',postData)     
    }   
}

要处理来自套接字的传入消息，请在组件的构造函数中：

socket.on('itemAdded',(res)=>{
   console.dir(res)
   dispatch(AddItem(res))
})

在actoins文件中，将AddItem声明为：

export const AddItem = (data) => ({
    type: "ADD_ITEM",
    item: data.item,
    itemId:data.id,
    completed:data.completed
})

对我来说，这仍然是新的，所以任何反馈都是非常感谢的。我还将向https://github.com/luskhq/redux-ws提交PR，以便在那里列出一个示例。