import { applyMiddleware , compose , createStore } from 'redux' ; import { Provider } from 'react-redux' ; import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import websocket from '@giantmachines/redux-websocket' ; import { getDefaultMiddleware } from '@reduxjs/toolkit' ; import { instrument } from './components/DevTools' ; import { WEBSOCKET_PREFIX } from './constants' ; import AppContainer from './containers/AppContainer' ; import reducer from './store/reducer' ; import './styles/style.scss' ; const { NODE_ENV } = process . env ; const websocketMiddleware = websocket ( { prefix : WEBSOCKET_PREFIX , onOpen : ( socket ) => { window . __socket = socket ; } , dateSerializer : ( date ) => date . toISOString ( ) , deserializer : JSON . parse , } ) ; /**
 * Create a custom middleware to make the simulate disconnect feature function
 * as a more interesting demo. Force the middleware to attempt to reconnect
 * an arbitrary number of times.
 */ const disconnectSimulatorMiddleware = ( ) => { const OldWebSocket = window . WebSocket ; return ( next ) => ( action ) => { const { type , payload } = action ; if ( type === `${ WEBSOCKET_PREFIX }::BROKEN` ) { ( window as any ) . WebSocket = class FakeWebSocket { close = ( ) => { } ; addEventListener = ( ) => { } ; } ; } if ( type === `${ WEBSOCKET_PREFIX }::RECONNECT_ATTEMPT` ) { const { count } = payload ; if ( count > 2 ) { window . WebSocket = OldWebSocket ; } } next ( action ) ; } ; } ; const store = createStore ( reducer , compose ( applyMiddleware ( disconnectSimulatorMiddleware , websocketMiddleware , ... getDefaultMiddleware ( { serializableCheck : { ignoredActionPaths : [ 'payload.event' ] , ignoredActions : [ 'REDUX_WEBSOCKET_DEMO::OPEN' ] , } , } ) ) , instrument ( ) ) ) ; const user = localStorage . getItem ( 'user' ) ; if ( ! user ) { localStorage . setItem ( 'user' , '👋' ) ; if ( NODE_ENV === 'production' && window . _StatHat ) { window . _StatHat . push ( [ '_trackCount' , '8ITYG3NogZcXeGCJlriMyCBXN3dl' , 1.0 ] ) ; } } ReactDOM . render ( < Provider store = { store } > < AppContainer /> < /Provider>, document.getElementById('root'));