redux toolkit socket io

The solution for “redux toolkit socket io” can be found here. The following code will assist you in solving the problem.

// Create class to interact with sockets
import { io, Socket } from ‘socket.io-client’

export default class SocketClient {
socket: Socket | null | undefined

connect() {
this.socket = io(‘https://localhost:8080’, {
extraHeaders: {
Authorization: ‘Bearer …’,
},
})
}

disconnect() {
if (this.socket) {
this.socket.disconnect()
this.socket = null
}
}

emit(eventName: string, data: any) {
if (this.socket) {
this.socket.emit(eventName, data)
}
}

on(eventName: string, func: () => void) {
if (this.socket) {
this.socket.on(eventName, func)
}
}
}

// —————————————————–
// When we create a store, we add middleware with socket
// —————————————————–

export const socket = new SocketClient()

export function makeStore() {
return configureStore({
// …
middleware: [socketMiddleware(socket)],
})
}

// —————————————————–
// Track all dispatches and interact with the socket
// —————————————————–

import { Dispatch } from ‘redux’
import { RootState } from ‘stores/rootReducer’

// Here can be any dispatch to open a connection
const INIT_KEY = ‘connect/socket’

interface SocketMiddlewareParams {
dispatch: Dispatch
getState: () => RootState
}

const socketMiddleware = (socket: any) => {
return (params: SocketMiddlewareParams) => (next: any) => (action: any) => {
const { dispatch } = params
const { type, payload } = action

if (type === INIT_KEY) {
socket.connect()

// Example ON
socket.on(‘user/connect’, (socketIds: any) => {
socket.emit(‘sync’, socketIds)
})
}

switch (type) {
// Example EMIT
case ‘user/disconnect’: {
socket.emit(‘joinRoom’, payload.room)
break
}

default:
break
}

return next(action)
}
}

// Usage
import { useDispatch } from ‘react-redux’
import { useEffect } from ‘react’

function MyApp() {
const dispatch = useDispatch()

useEffect(() => {
dispatch({ type: ‘socket/connect’ })
}, [])

return (

Yep!

)
}

Thank you for using DeclareCode; We hope you were able to resolve the issue.

More questions on [categories-list]

0
inline scripts encapsulated in