{"id":16384021,"url":"https://github.com/lttb/redux-wsat","last_synced_at":"2025-08-03T03:06:38.521Z","repository":{"id":57351906,"uuid":"78341965","full_name":"lttb/redux-wsat","owner":"lttb","description":"Redux Websocket Action Transfer","archived":false,"fork":false,"pushed_at":"2017-01-11T03:45:53.000Z","size":24,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-23T21:47:07.144Z","etag":null,"topics":["api","react","redux","redux-actions","redux-middleware","websocket"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lttb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-08T12:41:08.000Z","updated_at":"2021-02-13T08:52:29.000Z","dependencies_parsed_at":"2022-08-29T11:00:38.704Z","dependency_job_id":null,"html_url":"https://github.com/lttb/redux-wsat","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/lttb/redux-wsat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fredux-wsat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fredux-wsat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fredux-wsat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fredux-wsat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lttb","download_url":"https://codeload.github.com/lttb/redux-wsat/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fredux-wsat/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268488198,"owners_count":24258236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","react","redux","redux-actions","redux-middleware","websocket"],"created_at":"2024-10-11T04:10:19.349Z","updated_at":"2025-08-03T03:06:38.482Z","avatar_url":"https://github.com/lttb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux Websocket Action Transfer\n\nThis package allows to create middleware that transfer **redux actions** between client and server via websocket.\n\n## Why?\n\nWith Redux we can think in this way: our UI actions that we need to save to store we can describe as **redux-actions**.\nWe also have some UI-component logic, for example, that we can save only in UI Component State, but we don't need to save them to server.\nSo let's talk about only those actions, that we want so save to the store and to the server.\n\nAnd we familiar with constructions like `crud.updateUser(...)` in the different places in the code.\nWell, we use `redux-saga` and a lot of other great libs, but mostly, in my opinion, we need to **just keep the action**.\n\n**The main point** of this project is moving **redux actions** to the next level of services interactions and use it like messaging protocol between different service components, not only frontend. \nIt can be useful for realtime applications with microservice architecture.\n\nFor example, your app sends actions from client to relay that passes them into the Service Bus, where they handle by workers. Then workers send results to Service Bus like action again, and relay passes them to all clients, that need.\n\nAnd on each service layer *action types* may be common or specified with conversions.\n\nIt also allows you to get rid of such this in your code: `crud.updateUser(...)`, because all action that you would like to send on server will send automatically.\n\n\u003e You can initialize WS-connection asynchronously by *action type* - pass it in options like: `\n{ actions: { INIT } } `\n\u003e See [counter](https://github.com/lttb/redux-wsat/tree/master/examples/counter) for example.\n\n\n## Usage\n\nThe default data-flow is:\n\n1) UI produced some action;\n2) WSAT middleware;\n3) server handle that action and send to clients action that they need to dispatch;\n4) clients recieve action from server, dispatch and update UI.\n\nThis flow allows you to have one data-flow direction and have more consistent data, espacially for collaborative working.\n\n\nReduxWSAT takes two arguments:\n\n- *WebSocket Initor* (required). Returns socket or something that resolves `onmessage` and `onclose` (optional, for reconnect) and represent the interface like [native WebSocket API](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket): \n  - `{ onmessage, onclose, onerror }` - optional, for events handling from WSAT;\n  - `{ send }` - required, for message sending to server.\n- options. `{ retry: { timeout }, actions: { INIT }, helpers: { isWSAT, prepareAction, getAction, isClientFirst } }`\n  - `retry: { timeout }` By default retries to connect without timeout;\n  - `actions: { INIT }` By default {}. `INIT` is *action type* for async socket initialization;\n  - `helpers: { isWSAT, prepareAction, getAction, isClientFirst }`\n    - `isWSAT` - checks action for server sending. By default send all actions but `action.wsat === false`\n    - `prepareAction` - prepare action for sending to server. By default `action =\u003e JSON.stringify({ action })`\n    - `getAction` - returns action that received from socket, that would be dispatched (if Boolean(result)). By default return `{ wsat: false, ...action }`\n    - `isClientFirst` - checks if you need to dispatch that action on client too. Be careful, you can dispatch this action twice, if server send this action back to author\n\nLet's say we have this *configureStore.js*:\n\n```js\nimport { createStore, applyMiddleware, compose } from 'redux';\n\nimport WSAT from 'redux-wsat';\n\nimport rootReducer from '~/reducers';\nimport { wsConfig } from '~/config';\n\nexport default () =\u003e {\n  const wsat = WSAT(() =\u003e {\n    const socket = new WebSocket(wsConfig.url);\n\n    socket.onerror = error =\u003e console.log('WS error', error);\n    socket.onclose = () =\u003e console.log('WS connection closed');\n    socket.onopen = () =\u003e console.log('WS connection established');\n\n    return socket;\n  });\n\n  const store = createStore(rootReducer, {}, compose(\n    applyMiddleware(wsat),\n  ));\n\n  return store;\n};\n```\n\nAnd stateless server, that keeps websocket connections and send received messages to all clients:\n```js\nwss.on('connection', ws =\u003e\n  ws.on('message', message =\u003e\n    wss.clients.forEach(client =\u003e client.send(message))));\n```\n\nSo thats it - we send all **actions** from client to server and then transfer them for each client (includes author), where they dispatch and update clients store and UI.\n\n\nYou can also check [counter example](https://github.com/lttb/redux-wsat/tree/master/examples/counter) with async socket initialization and action dispatch in socket event listners\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flttb%2Fredux-wsat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flttb%2Fredux-wsat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flttb%2Fredux-wsat/lists"}