소켓 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}); 
     } 
    }); 
}); 

,369을

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);