Các quy trình chạy dài ở đâu trong ứng dụng React + Redux?

Question

Các quy trình chạy trong thời gian dài nên "sống" trong ứng dụng phản ứng + redux ở đâu?

Đối với một ví dụ đơn giản, hãy xem xét một lớp mà gửi và nhận tin nhắn qua một WebSocket:

class WebsocketStreamer { 
    sendMessage(message) { 
    this.socket.send(…); 
    } 

    onMessageReceive(event) { 
    this.dispatch({ 
     type: "STREAMER_RECV", 
     message: event.data, 
    }) 
    } 
} 

Làm thế nào nên vòng đời của lớp này được quản lý?

bản năng đầu tiên của tôi là để giữ nó trên store:

var stores = { 
    streamer: function(state={}, action) { 
    if (action.type == "@@INIT") 
     return { streamer: new WebsocketStreamer() } 
    if (action.type == "STREAMER_SEND") 
     state.streamer.sendMessage(action.message) 
    return state; 
    } 
} 

Nhưng, ngoài việc là một chút lạ, cũng không có cách nào cho WebsocketStreamer để có được quyền truy cập vào các dispatch() chức năng, và nó phá vỡ nóng tải lại.

Một giải pháp tiềm năng là để giữ nó trong một nơi toàn cầu:

const streamer = new WebsocketStreamer(); 

Nhưng điều đó có ý nghĩa testability rõ ràng, và ngắt nóng tải lại quá.

Vậy, quy trình chạy dài trong một ứng dụng phản ứng + redux ở đâu?

Lưu ý: Tôi nhận thấy rằng ví dụ đơn giản này có thể được xây dựng chỉ với các cửa hàng + nhà cung cấp hành động. Nhưng tôi đặc biệt muốn biết các quy trình tồn tại lâu dài nên tồn tại trong những tình huống mà chúng tồn tại.

Answer 1

Tôi đang làm điều gì đó tương tự với ổ cắm web. Trong trường hợp của tôi, tôi chỉ đơn giản là bọc máy khách websocket trong một thành phần React để trả về null và tiêm nó càng gần gốc càng tốt.

<App> 
    <WebSocketClientThingy handlers={configuredHandlers}/> 
    .... 
</App> 

Đây là ví dụ nhanh. Nó khá ngây thơ, nhưng mọi thứ đã hoàn thành.

https://github.com/trbngr/react-example-pusher

lưu ý nhanh: Các WebSocket không sống trong cửa hàng. Nó đơn giản ở đó và xuất bản các hành động.

EDIT: Tôi quyết định khám phá việc thiết lập ứng dụng khách (đối tượng tồn tại lâu dài) thành trạng thái toàn cầu. Tôi phải nói rằng tôi là một fan hâm mộ của phương pháp này.

https://github.com/trbngr/react-example-pusher/tree/client_as_state

Answer 2

Theo kinh nghiệm của tôi, có hai tùy chọn. Trước tiên, bạn có thể chuyển cửa hàng sang bất kỳ mã không phải Redux nào và gửi các hành động từ đây. Tôi đã làm điều này với kết nối socket và tất cả đều ổn. Thứ hai, nếu bạn cần ổ cắm hoặc bất cứ điều gì để thay đổi với hành động redux, có vẻ như một ý tưởng tốt để đặt kết nối và nó quản lý trong middleware tùy chỉnh. Bạn sẽ có quyền truy cập để lưu trữ API cũng như sẽ được thông báo về tất cả các hành động gửi đi, do đó, bạn có thể làm bất cứ điều gì bạn cần.