{"library":"redux-cablecar","title":"Redux CableCar","description":"redux-cablecar is Redux middleware designed to seamlessly integrate Redux actions with Rails Action Cable. It establishes a WebSocket connection, enabling automatic transmission of specified client-side Redux actions to a Rails server and converting server messages back into client-side Redux actions. The current stable version is 5.0.7. The package appears to follow a maintenance-oriented release cadence, primarily focusing on dependency updates and Node.js compatibility, as evidenced by recent changes in the v5.x series. Its key differentiator is providing a direct, opinionated bridge between the Redux state management pattern in a frontend application and the real-time capabilities of a Rails backend via Action Cable, simplifying the setup for bi-directional communication over WebSockets. This allows developers to treat server interactions as standard Redux actions, abstracting away much of the underlying WebSocket management.","language":"javascript","status":"maintenance","last_verified":"Thu Apr 23","install":{"commands":["npm install redux-cablecar"],"cli":null},"imports":["import { createCableCarRoute } from 'redux-cablecar'","const cableCarRoute = createCableCarRoute(); const cableCarMiddleware = cableCarRoute.createMiddleware();","cableCarRoute.connect(store, 'MainChannel', options)"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { configureStore } from '@reduxjs/toolkit';\nimport { createCableCarRoute } from 'redux-cablecar';\n\n// A dummy reducer for demonstration purposes\nconst initialState = { messages: [] };\nfunction reducer(state = initialState, action) {\n  switch (action.type) {\n    case 'MESSAGE_RECEIVED_FROM_RAILS':\n      return { ...state, messages: [...state.messages, action.payload] };\n    case 'RAILS_SEND_MESSAGE':\n      // This action will be intercepted by CableCar and sent to Rails\n      console.log('Dispatching RAILS_SEND_MESSAGE, CableCar will forward this:', action.payload);\n      return state;\n    default:\n      return state;\n  }\n}\n\n// Step 1: Create cablecar route and middleware\nconst cableCarRoute = createCableCarRoute();\nconst cableCarMiddleware = cableCarRoute.createMiddleware();\n\n// Step 2: Add middleware to the Redux store\n// Using configureStore from Redux Toolkit for modern setup\nconst store = configureStore({\n  reducer: reducer,\n  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(cableCarMiddleware),\n  devTools: process.env.NODE_ENV !== 'production' // Enable Redux DevTools\n});\n\n// Step 3: Initialize the cablecar connection to the Redux store and a Rails ActionCable channel\nconst options = {\n    // Parameters sent to the Rails channel when subscribing (e.g., params[:room])\n    params: { room: 'chat_room_1' },\n    // Define which Redux actions should be sent to the Rails server.\n    // By default, it matches actions with type prefix 'RAILS_'.\n    permittedActions: ['RAILS_SEND_MESSAGE', /^CLIENT_TO_SERVER_/],\n    // ActionCable Callbacks\n    initialized: () => console.log('CableCar initialized.'),\n    connected: () => console.log('CableCar connected to MainChannel!'),\n    disconnected: () => console.log('CableCar disconnected.'),\n    rejected: () => console.error('CableCar connection rejected.')\n};\n\nconst cableCar = cableCarRoute.connect(store, 'MainChannel', options);\n\n// Example of dispatching an action that will be sent to the server\nstore.dispatch({ type: 'RAILS_SEND_MESSAGE', payload: { text: 'Hello from Redux!', author: 'Client' } });\n\n// Example of an action that will NOT be sent to the server (unless explicitly permitted)\nstore.dispatch({ type: 'LOCAL_ACTION', payload: 'This stays client-side.' });\n\nconsole.log('Redux store and CableCar middleware initialized. Check console for dispatches.');\n","lang":"javascript","description":"This quickstart demonstrates the full setup of `redux-cablecar` by creating a Redux store using Redux Toolkit, applying the CableCar middleware, connecting to a simulated Rails ActionCable 'MainChannel' with custom parameters and action filtering, and dispatching an action intended for the server. It also shows an example of a local action not sent to the server.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}