Sou novo com essa tecnologia React-Redux e gostaria da sua ajuda com alguma implementação.

Quero implementar um aplicativo de bate-papo com soquetes (socket.io). Primeiro, o usuário precisa se inscrever (eu uso o passaporte no lado do servidor) e, depois, se a inscrição for bem-sucedida, o usuário deverá se conectar ao webSocket.

Eu pensei que o melhor seria usar um middleware como um pipe para todas as ações e, dependendo do tipo de ação que obtém o middleware, fazer coisas diferentes.

Se o tipo de ação forAUTH_USER, crie uma conexão cliente-servidor e configure todos os eventos que virão do servidor.

Se o tipo de ação forMESSAGE envie para o servidor a mensagem.

Partes de codigo:

----- socketMiddleware.js ----

import { AUTH_USER,  MESSAGE } from '../actions/types';

import * as actions from 'actions/socket-actions';

import io from 'socket.io-client';

const socket = null;

export default function ({ dispatch }) {

    return next => action => {

        if(action.type == AUTH_USER) {

            socket = io.connect(`${location.host}`);

            socket.on('message', data => {

               store.dispatch(actions.addResponse(action.data));

            });

        }

        else if(action.type == MESSAGE && socket) {

            socket.emit('user-message', action.data);

            return next(action)

        } else {
            return next(action)
        }
    }

}

------ index.js -------

import {createStore, applyMiddleware} from 'redux';

import socketMiddleware from './socketMiddleware';



const createStoreWithMiddleware = applyMiddleware(

  socketMiddleware

)(createStore);

const store = createStoreWithMiddleware(reducer);

<Provider store={store}>

    <App />

</Provider>

O que você acha dessa prática, é uma implementação melhor?