How do you handle real-time updates in Redux applications?

// index.js

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connected');

    ws.on('message', (message) => {
        console.log('Received: %s', message);

        // Echo the message back to the client
        ws.send(message);
    });

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

// App.js

import React, { useEffect } from 'react';
import {
    useDispatch,
    useSelector
} from 'react-redux';
import {
    addTodo,
    toggleTodo,
    deleteTodo
} from '../actions/todoActions';
import './App.css';

const App = () => {
    const dispatch = useDispatch();
    const todos = useSelector(state => state.todos);

    useEffect(() => {
        const socket = new WebSocket('ws://localhost:8080');

        socket.onopen =
            () => console.log('WebSocket connection established.');

        socket.onmessage = (event) => {
            const data = JSON.parse(event.data);
            switch (data.type) {
                case 'ADD_TODO':
                    dispatch(addTodo(data.todo));
                    break;
                case 'TOGGLE_TODO':
                    dispatch(toggleTodo(data.id));
                    break;
                case 'DELETE_TODO':
                    dispatch(deleteTodo(data.id));
                    break;
                default:
                    console.log('Unknown WebSocket message type:', data.type);
            }
        };

        return () => {
            socket.close();
        };
    }, [dispatch]);

    const handleAddTodo = () => {
        const text = prompt('Enter new todo:');
        if (text) {
            dispatch(addTodo({
                id: Date.now(),
                text,
                completed: false
            }));
        }
    };

    const handleToggleTodo = (id) => {
        dispatch(toggleTodo(id));
    };

    const handleDeleteTodo = (id) => {
        dispatch(deleteTodo(id));
    };

    return (
        <div className="App">
            <h1>Todo List</h1>
            <button onClick={handleAddTodo}>
                Add Todo
            </button>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        <input
                            type="checkbox"
                            checked={todo.completed}
                            onChange={
                                () => handleToggleTodo(todo.id)} />
                        <span style=
                            {{
                                textDecoration: todo.completed ?
                                    'line-through' : 'none'
                            }}>
                            {todo.text}
                        </span>
                        <button onClick={
                            () => handleDeleteTodo(todo.id)}>
                            Delete
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default App;

// src/actions/todoActions.js

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const DELETE_TODO = 'DELETE_TODO';

export const addTodo = (todo) => ({
    type: ADD_TODO,
    payload: todo,
});

export const toggleTodo = (id) => ({
    type: TOGGLE_TODO,
    payload: id,
});

export const deleteTodo = (id) => ({
    type: DELETE_TODO,
    payload: id,
});

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import todoReducer from './reducers/todoReducer';
import App from './components/App';

const store = createStore(todoReducer);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

// src/reducers/todoReducer.js

import {
    ADD_TODO,
    TOGGLE_TODO,
    DELETE_TODO
} from '../actions/todoActions';

const initialState = {
    todos: [],
};

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TODO:
            return {
                ...state,
                todos: [...state.todos, action.payload],
            };
        case TOGGLE_TODO:
            return {
                ...state,
                todos: state.todos.map(todo =>
                    todo.id === action.payload ?
                        { ...todo, completed: !todo.completed } : todo
                ),
            };
        case DELETE_TODO:
            return {
                ...state,
                todos: state.todos.filter(
                    todo => todo.id !== action.payload),
            };
        default:
            return state;
    }
};

export default todoReducer;