Skip to content


The WebSocket task handler allows to create a WebSocket connection, send messages, and listen on incoming ones.


Parameter Type Description
socketFactory (connectionUrl: string) => WebSocketLike Optional. Function that will be used to create the socket, useful to provide compatibility layers (e.g. Primus, SockJS) or enhanced versions of WebSocket. Defaults to creating a standard WebSocket
encode (data: any) => any Optional. Function to encode data from a send task into a wire format. Defaults to JSON.stringify
decode (data: any) => any Optional. Function to decode data from the wire into a format useful for application code. Defaults to JSON.parse


import ReconnectingWebSocket from 'reconnecting-websocket'
import { configureAgents, createSocketAgent } from 'redux-agent'

    // Provide enhanced/wrapped implementation
    socketFactory: (url) => new ReconnectingWebSocket(url)
    // skip JSON encoding
    encode: (data) => data,
    // skip JSON decoding
    decode: (data) => data 
], store))

Task: Listen

This task describes a connection intent, the actions that will to notify about connection status, and the action that will notify of incoming messages.

  type: 'socket',
  op: 'listen',
  url: string,          // socket endpoint URL, e.g. wss://
  actions: {
    connect: string,    // action type to dispatch when the socket connects
    disconnect: string, // action type to dispatch when the socket disconnects
    error: string,      // action type to dispatch when an error occurs
    message: string,    // action type to dispatch when a message is received


To disconnect a socket, simply remove the task (see how in the example).


Event Type Meta Payload
connect None None
disconnect None None
error None None
message None Received message

Task: Send

  type: 'socket',
  op: 'send',
  data: any,      // data to send, will be encoded to JSON
  actions: {
    sent: string // action type to dispatch when the message has been sent


The sent action can be a dummy (it doesn’t need to be handled by any reducer) but needs to be dispatched, and thus specified, because it will signal to the task reducer that the send task can be removed from the store. This requirement will be lifted in future versions.


Name Meta Payload
sent None Note


Run this example »

import {
  addTask, delTasks, reduceReducers, taskReducer
} from 'redux-agent'

const MAX_EVENTS = 4

const reducer = (state, action) => {
  switch (action.type) {
      return addTask(state, {
        type: 'socket',
        op: 'listen',
        url: 'wss://',
        actions: {
          connect: 'SOCKET_CONNECTED',
          disconnect: 'SOCKET_DISCONNECTED',
          error: 'SOCKET_ERROR',
          message: 'SOCKET_MESSAGE_RECEIVED'

      return addTask(state, {
        type: 'socket',
        op: 'send',
        data: {
          event: 'subscribe',
          pair: ['XBT/USD', 'XBT/EUR'],
          subscription: { name: 'ticker' }
        actions: {
          sent: 'SOCKET_MESSAGE_SENT'

      return delTasks(state,
        (t) => t.type === 'socket')

      const { events } = state.liveCurrencyUpdates
      return {
        liveCurrencyUpdates: {
          events: events.length < MAX_EVENTS
            ? events.concat(action.payload)
            : events.slice(0, -1).concat(action.payload)

      return state

export default reduceReducers(reducer, taskReducer)