ソケットio.emitがReact-Redux状態に影響する

Question

React + Reduxをセットアップしてsocket.ioを追加しました。 UI入力ボックスで、何かを入力すると、それをアクションに渡してソケットにしてから、そのページを訪れるすべてのブラウザに信号を送信することができます。

io.on（ 'action'、data => console.log（data））は、各ブラウザがソケットでシグナルブロードキャストを受信する方法です。しかし、この信号を使って各ブラウザの状態を更新したいのであれば、それをアクションファイルかreduxファイルに置く必要がありますか？

適用するコード：

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

アクションファイルエキス：

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

Reduxのファイルエキス：

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

サーバーのファイル・コード：

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

socket.onを希望のコンポーネントのcomponentDidMountの中に置きます。また、コンポーネントをReduxと接続します（react-redux 'connectを使用）。アクションをソケットデータでディスパッチします。このような
何か：

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

とのあなたmapDispatchToProps：

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

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