Lưu trữ đối tượng "toàn cầu" bên ngoài cửa hàng Redux trong ứng dụng React/Redux

Question

Tôi đang xây dựng ứng dụng React/Redux cần một đối tượng có sẵn trên toàn cầu (ví dụ về cá thể websocket lib). Ban đầu tôi cố gắng lưu trữ nó trong cây trạng thái Redux, tuy nhiên, cá thể không phải là bất biến và nó gây ra rất nhiều vấn đề với tải lại nóng trong quá trình phát triển (tấn các lỗi tham chiếu vòng tròn không tồn tại khi chạy từ mã được biên dịch).

Câu hỏi của tôi là cách lưu trữ/tạo cá thể này sao cho nó có sẵn cho mã Redux của tôi và các thành phần React? Tôi có thể tạo ra nó ở trên cùng của cây thành phần và chuyển nó xuống cây như một cây đỡ, nhưng điều đó cảm thấy rất "bẩn thỉu" sau khi làm mọi thứ với phản ứng-redux kết nối.

Có cách nào tốt hơn để thực hiện việc này không?

Answer 1

Redux thunk, tác giả gaeron, ai là tác giả của Redux, kể từ 2.1.0 cho phép bạn làm:

const store = createStore(
    reducer, 
    applyMiddleware(thunk.withExtraArgument(api)) 
) 

// later 
function fetchUser(id) { 
    return (dispatch, getState, api) => { 
    // you can use api here 
    } 
} 

Đây là trực tiếp từ các tài liệu, xem liên kết dưới đây để biết thêm thông tin:

https://github.com/gaearon/redux-thunk

Answer 2

@ câu trả lời của sheeldotme sẽ hoạt động tốt nếu bạn đang sử dụng khối.

Cũng nên nhớ rằng, tùy thuộc vào lib websocket bạn đang sử dụng, bạn có thể không cần cá thể dưới dạng biến toàn cầu. Ví dụ: với socket.io-client, sau cuộc gọi io(url) ban đầu của bạn mà thực hiện kết nối websocket, mọi cuộc gọi tiếp theo đến io(url) (với cùng một đối số url) sẽ trả về cùng kết nối đó (ví dụ: socket đối tượng) khỏi bộ nhớ mà không phải kết nối lại. Nó làm cho nó dễ dàng để có một API mà bạn chỉ có thể import/require, thay vì phải vượt qua các trường hợp xung quanh hoặc làm cho nó toàn cầu. Xem socket.io docs để biết thêm thông tin.

Ví dụ:

socket.js

import io from 'socket.io-client' 
const socket = io(`${protocol}//${hostname}:${port}`) 
export default socket 

Bây giờ bạn có thể chỉ đơn giản là import/requirebạn socket.js tập tin để có thể dễ dàng truy cập vào các đối tượng cùng một ổ cắm từ bất cứ nơi nào.