redux

Question

साथ उपयोग करना socket.io यह पहली बार मैं उत्पादन में socket.io उपयोग करने के लिए जा रहा हूँ है। मैं React + Redux उपयोग कर रहा हूँ। मैं हाल ही में redux साथ socket.io और उसके काम कर ठीक एकीकृत किया है लेकिन मुझे यकीन है कि अगर यह मैं कैसे किया है करने का सबसे अच्छा तरीका होगा नहीं हूँ। क्योंकि मुझे redux के साथ socket.io के किसी भी प्रकार के उचित कार्यान्वयन नहीं मिला है, इसलिए अगर मैं इसे बेहतर बना सकता हूं तो मुझे कुछ मदद/सुझावों की आवश्यकता है।

तो, शुरुआत के लिए मैं सेटअप सभी एप्लिकेशन पर सॉकेट प्रबंधन के लिए एक सेवा है:

Socket.js

import isEmpty from 'lodash/isEmpty'; 
import io from 'socket.io-client'; 
import storage from '../storage'; 

/* eslint-disable no-use-before-define */ 

const Socket = { 
    connect, 
    emit, 
    on, 
    removeListener, 
    socket: null 
}; 

/* eslint-enable no-use-before-define */ 

function connect() { 
    const hasAuthenticated = !isEmpty(storage.get('user')); 
    if (hasAuthenticated) { 
    // Setup a server for testing. 
    Socket.socket = io.connect('http://localhost:3000', { reconnect: true }); 
    } 
} 

connect(); 

function on(eventName, callback) { 
    if (Socket.socket) { 
    Socket.socket.on(eventName, data => { 
     callback(data); 
    }); 
    } 
} 

function emit(eventName, data) { 
    if (Socket.socket) { 
    Socket.socket.emit(eventName, data); 
    } 
} 

function removeListener(eventName) { 
    if (Socket.socket) { 
    Socket.socket.removeListener(eventName); 
    } 
} 

export default Socket; 

मैं केवल एक पृष्ठ के साथ यह प्रयोग किया जाता है, लेकिन ज़ाहिर है अधिक पेज होंगे। उस पृष्ठ के लिए मेरे redux compositon है:

Dashboard.jsx

componentWillMount() { 
    this.props.alertViolations(); // Action 
    } 

    componentWillUnmount() { 
    this.props.unsubscribeViolations(); // Action 
    } 

Actions.js

export function alertViolations() { 
    return dispatch => { 
    Socket.on('violations', violation => { 
     dispatch(actions.updateViolations(violation)); 
    }); 
    }; 
} 

export function unsubscribeViolations() { 
    Socket.removeListener('violations'); 
    return dispatch => { 
    dispatch(actions.removeViolationsListener()); 
    }; 
} 

इसका काम कर ठीक। अनमाउंटिंग पर यह मेरे द्वारा सर्वर पर मौजूद उत्सर्जित फ़ंक्शन को सुनना बंद कर देता है।

• मैं सेटअप करने के लिए एक और अधिक बेहतर और अमूर्त तरह से सॉकेट के प्रबंधन के लिए एक मध्यस्थ की जरूरत है: मैं वास्तव में अगर मैं के बारे में कुछ सुझाव मिल सकता है की सराहना करेंगे?
• वहाँ redux साथ सॉकेट प्रबंधन करने के लिए एक बेहतर तरीका है?
• मैं निर्मित connect और disconnect फ़ंक्शंस का उपयोग कैसे कर सकता हूं?
• जिस तरह से मैंने उपयोगकर्ता को प्रमाणीकरण के लिए कनेक्शन बनाने के लिए संभाला है, क्या यह ठीक है? या यह भी संभालने का एक बेहतर तरीका हो सकता है?
• ओह और यह भी, मैं लॉग आउट करने पर कनेक्शन को निकालना चाहते हैं? क्या मुझे बस सभी तरीकों से लिस्टेनर्स को हटाना होगा या क्या मैं लॉगआउट कार्यों पर डिस्कनेक्ट फ़ंक्शन का उपयोग कर सकता हूं?

धन्यवाद एक बहुत। अगर मुझे समझाने में कुछ याद आया तो कृपया मुझे बताएं।

Answer 1

रेडक्स ऐप में एक वेबसाइकिल जैसे लगातार कनेक्शन के लिए मिडलवेयर सबसे आम जगह है। पहले से ही मौजूदा Redux + websocket एकीकरण पुस्तकालयों की एक अच्छी संख्या है - मेरी सूची https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware.md#sockets-and-adapters पर देखें। आप उनमें से कुछ का उपयोग करने में सक्षम हो सकते हैं, या अपने स्वयं के कार्यान्वयन के लिए उदाहरण के रूप में उनका उपयोग कर सकते हैं।