Sockel io.emit

Question

React-Redux Zustand beeinflussen Ich habe einrichten Reagieren + Redux und hinzugefügt socket.io zu. Bei einem UI-Eingabefeld, wenn ich etwas geben, kann ich es zu Aktion übergeben, dann die Buchse, dann strahlen das Signal an alle Browser die Seite zu besuchen.

Ich weiß io.on ('action', data => console.log (Daten)) ist der Weg für jeden Browser, um das Signal, das von Buchse übertragen zu empfangen. Aber wenn ich wünsche, dieses Signal zu verwenden, um den Zustand in jedem Browser zu aktualisieren, so werde ich es Platz in der Aktionsdatei oder die Redux-Datei?

Code anwenden:

io.on('action', data => console.log(data)) //will write something to update the state 

Aktion Datei extrahieren:

export const handleNameInput = (name) => { 
    return { 
     type: InviteeActionTypes.ADD_HANDLENAMEINPUT, 
     meta: {remote: true}, 
     name 
    }; 
} 

redux Datei extrahieren:

case InviteeActionTypes.ADD_HANDLENAMEINPUT: { 
    return { 
     ...state, 
     pendingGuest : action.name 
    }; 
} 

Server-Datei Code:

var http = require('http'); 
var server = http.createServer(); 
var socket_io = require('socket.io'); 
server.listen(4000); 
var io = socket_io(); 
io.attach(server); 
io.on('connection', function(socket){ 
    console.log("Socket connected: " + socket.id); 
    socket.on('action', (action) => { 
     if(action.type === 'invitee/ADD_HANDLENAMEINPUT'){ 
      console.log('Data : ', action.name); 
      io.local.emit('action', {type:'message', data:action.name}); 
     } 
    }); 
}); 

Answer 1

Platz der socket.on innerhalb der componentDidMount der Komponente, die Sie wünschen. Und verbinden Sie die Komponente mit Redux (mit react-redux 'connect). Versenden Sie die Aktion mit den Socket-Daten.
Etwas wie folgt aus:

this.socket.on('action', (action) => { 
    this.props.sendDispatch(action); 
}); 

und in Ihrem mapDispatchToProps:

const mapDispatchToProps = (dispatch) => ({ 
    sendDispatch: (action) => { 
    dispatch(anyActionCreator(action)); // this action must update your state via reducer 
    } 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);