Data Flow Communication Patterns

// Action Types
const INCREMENT = 'counter/increment';
const FETCH_USER = 'user/fetch';

// Action Creators
const increment = () => ({ type: INCREMENT });
const fetchUserAsync = (id) => async (dispatch) => {
  dispatch({ type: FETCH_USER + '/pending' });
  try {
    const user = await api.getUser(id);
    dispatch({ type: FETCH_USER + '/fulfilled', payload: user });
  } catch (error) {
    dispatch({ type: FETCH_USER + '/rejected', payload: error });
  }
};

// Reducer (Pure Function)
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, value: state.value + 1 };
    default:
      return state;
  }
}

// Store with Middleware
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(counterReducer, applyMiddleware(thunk));

// Unidirectional Flow
// View dispatches action
store.dispatch(increment());
// Reducer produces new state
// Store notifies subscribers
// View re-renders with new state

// Dispatch custom event
class UserCard extends HTMLElement {
  connectedCallback() {
    this.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('user-selected', {
        detail: { userId: this.dataset.userId },
        bubbles: true,
        composed: true // Cross shadow DOM boundaries
      }));
    });
  }
}

// Listen for custom event
document.addEventListener('user-selected', (event) => {
  console.log('User selected:', event.detail.userId);
  // Load user details, navigate, etc.
});

// React integration
function App() {
  useEffect(() => {
    const handler = (e) => console.log(e.detail);
    document.addEventListener('user-selected', handler);
    return () => document.removeEventListener('user-selected', handler);
  }, []);
}

// Native WebSocket
const ws = new WebSocket('wss://example.com/socket');

ws.onopen = () => {
  console.log('Connected');
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Message:', data);
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = () => {
  console.log('Disconnected');
  // Implement reconnection logic
  setTimeout(() => reconnect(), 1000);
};

// Socket.IO Client
import { io } from 'socket.io-client';

const socket = io('https://example.com', {
  reconnection: true,
  reconnectionDelay: 1000,
  reconnectionAttempts: 5,
  transports: ['websocket', 'polling'] // Fallback to polling
});

socket.on('connect', () => {
  console.log('Connected:', socket.id);
});

socket.on('message', (data) => {
  console.log('Received:', data);
});

socket.emit('chat-message', { room: 'general', text: 'Hello!' });

// Join room
socket.emit('join-room', 'room-123');

// React Hook for Socket.IO
function useSocket(url) {
  const [socket, setSocket] = useState(null);
  const [isConnected, setIsConnected] = useState(false);
  
  useEffect(() => {
    const newSocket = io(url);
    
    newSocket.on('connect', () => setIsConnected(true));
    newSocket.on('disconnect', () => setIsConnected(false));
    
    setSocket(newSocket);
    
    return () => newSocket.close();
  }, [url]);
  
  return { socket, isConnected };
}

// Client: EventSource API
const eventSource = new EventSource('/api/events');

// Default message event
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Message:', data);
};

// Custom event types
eventSource.addEventListener('user-update', (event) => {
  const user = JSON.parse(event.data);
  console.log('User updated:', user);
});

eventSource.addEventListener('notification', (event) => {
  const notification = JSON.parse(event.data);
  showToast(notification.message);
});

// Connection lifecycle
eventSource.onopen = () => {
  console.log('SSE connection opened');
};

eventSource.onerror = (error) => {
  console.error('SSE error:', error);
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log('Connection closed');
  }
};

// Close connection
eventSource.close();

// Server: Node.js/Express
app.get('/api/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  // Send initial message
  res.write('data: {"message": "Connected"}\n\n');
  
  // Send periodic updates
  const interval = setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: Date.now() })}\n\n`);
  }, 1000);
  
  // Custom event with ID
  res.write('event: user-update\n');
  res.write('id: 123\n');
  res.write('data: {"name": "John", "status": "online"}\n\n');
  
  // Set retry timeout (milliseconds)
  res.write('retry: 10000\n\n');
  
  // Cleanup on client disconnect
  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});

// Schema Definition
type Subscription {
  messageAdded(roomId: ID!): Message
  userStatusChanged(userId: ID!): UserStatus
  notificationReceived: Notification
}

type Message {
  id: ID!
  text: String!
  user: User!
  timestamp: String!
}

// Server: GraphQL Resolver
import { PubSub, withFilter } from 'graphql-subscriptions';

const pubsub = new PubSub();
const MESSAGE_ADDED = 'MESSAGE_ADDED';

const resolvers = {
  Mutation: {
    addMessage: async (_, { roomId, text }, { user }) => {
      const message = {
        id: generateId(),
        text,
        user,
        roomId,
        timestamp: new Date().toISOString()
      };
      
      await saveMessage(message);
      
      // Publish to subscribers
      pubsub.publish(MESSAGE_ADDED, { messageAdded: message });
      
      return message;
    }
  },
  
  Subscription: {
    messageAdded: {
      // Filter: only send to users in the same room
      subscribe: withFilter(
        () => pubsub.asyncIterator([MESSAGE_ADDED]),
        (payload, variables) => {
          return payload.messageAdded.roomId === variables.roomId;
        }
      )
    }
  }
};

// Client: Apollo Client Setup
import { split, HttpLink, ApolloClient, InMemoryCache } from '@apollo/client';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { createClient } from 'graphql-ws';

const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql' });

const wsLink = new GraphQLWsLink(
  createClient({ url: 'ws://localhost:4000/graphql' })
);

// Split based on operation type
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache()
});

import { useSubscription, gql, useMutation } from '@apollo/client';

const MESSAGE_SUBSCRIPTION = gql`
  subscription OnMessageAdded($roomId: ID!) {
    messageAdded(roomId: $roomId) {
      id
      text
      user { name }
      timestamp
    }
  }
`;

const ADD_MESSAGE = gql`
  mutation AddMessage($roomId: ID!, $text: String!) {
    addMessage(roomId: $roomId, text: $text) {
      id
      text
    }
  }
`;

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  
  // Subscription
  const { data, loading } = useSubscription(MESSAGE_SUBSCRIPTION, {
    variables: { roomId },
    onData: ({ data }) => {
      setMessages(prev => [...prev, data.data.messageAdded]);
    }
  });
  
  // Mutation
  const [addMessage] = useMutation(ADD_MESSAGE);
  
  const handleSend = (text) => {
    addMessage({ variables: { roomId, text } });
  };
  
  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>{msg.user.name}: {msg.text}</div>
      ))}
      <input onSubmit={(e) => handleSend(e.target.value)} />
    </div>
  );
}

// Solution 2: Context API
import { createContext, useContext } from 'react';

const UserContext = createContext(null);

function App() {
  const [user, setUser] = useState(null);
  
  return (
    <UserContext.Provider value={user}>
      <Dashboard />
    </UserContext.Provider>
  );
}

function Dashboard() {
  // No user prop needed
  return <Sidebar />;
}

function Sidebar() {
  // No user prop needed
  return <UserProfile />;
}

function UserProfile() {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
}

// Solution 3: Custom Hook
function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
}

function UserProfile() {
  const user = useUser(); // Clean API
  return <div>{user.name}</div>;
}