{"id":19027329,"url":"https://github.com/getstation/redux-broadcast-actions","last_synced_at":"2025-07-24T15:35:47.841Z","repository":{"id":66202687,"uuid":"343931622","full_name":"getstation/redux-broadcast-actions","owner":"getstation","description":"A tiny middleware to broadcast your redux actions using the Broadcast Channel API","archived":false,"fork":false,"pushed_at":"2021-03-15T16:08:40.000Z","size":177,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-24T13:11:02.669Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/getstation.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-02T22:34:30.000Z","updated_at":"2024-07-11T15:20:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"fc2c81df-caa6-4c10-afde-f24cbc067faf","html_url":"https://github.com/getstation/redux-broadcast-actions","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/getstation/redux-broadcast-actions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getstation%2Fredux-broadcast-actions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getstation%2Fredux-broadcast-actions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getstation%2Fredux-broadcast-actions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getstation%2Fredux-broadcast-actions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getstation","download_url":"https://codeload.github.com/getstation/redux-broadcast-actions/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getstation%2Fredux-broadcast-actions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266862630,"owners_count":23996867,"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-07-24T02:00:09.469Z","response_time":99,"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":[],"created_at":"2024-11-08T21:07:57.663Z","updated_at":"2025-07-24T15:35:47.833Z","avatar_url":"https://github.com/getstation.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-broadcast-actions\n\nA tiny middleware to broadcast your redux actions using the [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API).\nIt can sync actions between tabs, and even between all processes of a [Browser Extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) (background, workers, content scripts, popup, custom pages).\nThen you just need to plug all your pure reducers onto all your processes, and you have a state that is synced as simply as possible.\n\n### How to install\n\nInstall with npm or yarn\n```sh\nnpm install --save @getstation/redux-broadcast-actions\n# or\nyarn add @getstation/redux-broadcast-actions\n```\n\n### How to use\nIn all the processes where you need the actions to be dispatched and received, instanciate this middlware:\n\n```ts\nimport { createStore, applyMiddleware } from 'redux';\nimport { createBroadcastActionsMiddleware } from '@getstation/redux-broadcast-actions';\n\nconst store = createStore(rootReducer, {}, applyMiddleware(\n  // broadcast actions to other processes\n  createBroadcastActionsMiddleware({\n    // name given to BroadcastChannel. Can also be a BroadcastChannel instance\n    channel: 'redux_broadcast_actions',\n  })\n));\n```\n\nThen whenever you execute `store.dispatch(...)` in any process, all others are receiving the exact same action.\n\n#### Share initial state\nIf one of your process acts as a source of truth (server) and other processes (clients) need to ask for its current state to be initialized:\n\n##### Server\n```ts\nimport { createStore, applyMiddleware } from 'redux';\nimport {\n  createBroadcastActionsMiddleware,\n  createSendInitialStateMiddleware\n} from '@getstation/redux-broadcast-actions';\n\nconst store = createStore(rootReducer, {}, applyMiddleware(\n  // this middleware listens for clients asking for initial state\n  createSendInitialStateMiddleware(),\n  createBroadcastActionsMiddleware(),\n));\n```\n\n##### Client\n```ts\nimport { createStore, applyMiddleware, combineReducers } from 'redux';\nimport {\n  createBroadcastActionsMiddleware,\n  createGetInitialStateMiddleware,\n  initialStateReducer\n} from '@getstation/redux-broadcast-actions';\n\n// add initialStateReducer to the list of reducers\nconst store = createStore(combineReducers(initialStateReducer, rootReducer), {}, applyMiddleware(\n  // ask server for initial state\n  // ⚠️ should be the first middleware\n  createGetInitialStateMiddleware(),\n  createBroadcastActionsMiddleware(),\n));\n```\n\n#### I do not want to broadcast one or more actions\nYou can do that. First, by default some events of some libs are not broadcasted (redux-form, redux-persist, and some others, check `shouldForward` function for details).\nIf you do not want to broadcast one of your action, you can leverage the `meta` property of your action like this:\n\n```ts\ndispatch({\n  type: 'myAction',\n  meta: {\n    // this tells the middleware to not broadcast this action\n    local: true,\n  }\n})\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetstation%2Fredux-broadcast-actions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetstation%2Fredux-broadcast-actions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetstation%2Fredux-broadcast-actions/lists"}