Real-time Data Updates with WebSockets

import { configureStore, createSlice } from '@reduxjs/toolkit';

// Define the initial state of the stocks slice
const initialState = {
    stocks: {}
};

// Create a slice for the stocks with the reducers to handle the actions
const stocksSlice = createSlice({
    name: 'stocks',
    initialState,
    reducers: {
        // Reducer to handle stock updates
        stockUpdated(state, action) {
            const { symbol, price } = action.payload;
            state.stocks[symbol] = price;
        }
    }
});

// Destructure and export the action
export const { stockUpdated } = stocksSlice.actions;

// Create a Redux store with the slice reducer
const store = configureStore({
    reducer: {
        stocks: stocksSlice.reducer
    }
});

export default store;

import { stockUpdated } from './store';

// Establish a WebSocket connection
const socket = new WebSocket('wss://example.com/stocks');

// Listen for messages on the WebSocket
socket.onmessage = (event) => {
    // Parse the incoming message as JSON
    const data = JSON.parse(event.data);

    // Assume data is an array of stock objects with 'symbol' and 'price'
    data.forEach(stock => {
        // Dispatch the 'stockUpdated' action to update the store with the new price
        store.dispatch(stockUpdated(stock));
    });
};