WebSocket Integration for Real-Time Sync

Illustrate how to set up a WebSocket connection with Redux to push and receive state changes in real-time for multi-device synchronization.
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

// Middleware for handling WebSocket actions
const websocketMiddleware = store => next => action => {
  // If the action is to initialize the WebSocket connection
  if (action.type === 'WS_CONNECT') {
    const ws = new WebSocket(action.payload.url);
    // When a message is received from the server
    ws.onmessage = event => {
      const message = JSON.parse(;
      // Dispatch an action with the received message
      store.dispatch({ type: 'WS_MESSAGE_RECEIVED', payload: message });
    // Save the WebSocket object in our action for possible later use = ws;
  // If the action is to send a message through the WebSocket
  if (action.type === 'WS_SEND_MESSAGE') {
    const { ws, message } = action.payload;
  // Continue with the next middleware or the reducers
  return next(action);

const store = createStore(

export default store;
This snippet sets up a Redux store and a middleware to handle WebSocket connections and messages. The middleware checks for specific WebSocket-related actions, establishes a connection if necessary, sets up message handling, and enables the dispatch of messages through the WebSocket.
const wsConnect = url => ({
  type: 'WS_CONNECT',
  payload: { url }

const wsSendMessage = (ws, message) => ({
  type: 'WS_SEND_MESSAGE',
  payload: { ws, message }
These functions are action creators that return Redux actions for connecting to a WebSocket server and sending messages through an established WebSocket connection.
const initialState = {
  messages: []

// Reducer to handle WebSocket messages
const messageReducer = (state = initialState, action) => {
  switch (action.type) {
      // Add the received message to the state
      return {
        messages: [...state.messages, action.payload]
      return state;

export default messageReducer;
This reducer updates the Redux store's state when a WebSocket message is received, by adding the message to an array of messages.