Где хранить разъем в read-redux?

Question

Пробовал двумя способами:

1. вызов connectToServer() от действий создателя в Starter компонента в componentDidMount(); и отправки, как это:

   let socket = new Socket('ws://address/socket'); 
   
   socket.connect(); 
   
   dispatch({ 
       type: Constants.SESSION_SAVE_SOCKET, 
       socket: socket, 
   }); 
   
   const lobbyChannel = socket.channel('lobby'); 
   
   lobbyChannel.join() 
   .receive('ok',() => {   
       dispatch({ 
       type: Constants.SESSION_LOBBYCHANNEL_RECEIVE_OK, 
       }); 
   
       dispatch({ 
       type: Constants.SESSION_SAVE_LOBBYCHANNEL, 
       lobbyChannel: lobbyChannel, 
       }); 
   
   }).receive('error', (payload) => {    
       dispatch({ 
        type: Constants.SESSION_LOBBYCHANNEL_RECEIVE_ERROR, 
       }); 
   }); 
   

Следующая я получаю состояние, Redux в mapStateToProps connect. В результате компонент называется четыре раза, а реквизит пуст в результате.

2. положить всю логику в редуктор, но результат: компонент визуализируется с пустым реквизитом (неопределенные свойства) и моментом после того, как я вижу в консольных журналах, что соединение установлено, но компонент уже отображается.

Как бороться с такой проблемой? Спасибо за любые предложения.

Answer 1

Как я нашел, что работает, это настроить собственное промежуточное программное обеспечение для такого сокета.

import {createStore, applyMiddleware} from 'redux'; 
 
import startWs, {wsMiddleware} from './ws.api'; 
 

 
function handleData(state = {data1: {}}, action) { 
 
    switch (action.type) { 
 
    case 'ApiGotData': return Object.assign({}, state, {data1: action.data}); 
 
    default: return state; 
 
    } 
 
} 
 

 
const store = createStore(handleData, applyMiddleware(wsMiddleware)); 
 

 
startWs(store); 
 

 
export default store;

import * as Actions from './Actions'; 
 

 
var socket = null; 
 

 
const newData = { 
 
    'React version': '15', 
 
    'Project': 'Redux with socket.io', 
 
    'currentDateTime': new Date().toLocaleString() 
 
}; 
 

 
export function wsMiddleware() { 
 
    return (next) => (action) => { 
 
    if (socket && action.type === 'ApiGetData') { 
 
     console.log('ApiGetData'); 
 
     socket.emit('client:GetData', {}); 
 
    } else if (socket && action.type === 'ApiSetData') { 
 
     console.log('ApiSetData'); 
 
     socket.emit('client:SetData', action.data); 
 
    } 
 

 
    return next(action); 
 
    }; 
 
} 
 

 
export default function (store) { 
 
    socket = new io(); 
 

 
    socket.on('server:GetDataDone', (data) => { 
 
    console.log('GetDataDone'); 
 
    store.dispatch(Actions.apiGotData(data)); 
 
    }); 
 

 
    socket.on('server:SetDataDone',() => { 
 
    console.log('SetDataDone'); 
 
    store.dispatch(Actions.apiGetData()); 
 
    }); 
 
    
 
    store.dispatch(Actions.apiSetData(newData)); 
 
}

Проект пример ReduxSocketIO на https://github.com/jmarkstevens/ReactPatterns.