{"id":13805237,"url":"https://github.com/samiskin/redux-electron-store","last_synced_at":"2025-05-13T19:30:31.466Z","repository":{"id":57141441,"uuid":"47720003","full_name":"samiskin/redux-electron-store","owner":"samiskin","description":"⎋ A redux store enhancer that allows automatic synchronization between electron processes","archived":false,"fork":false,"pushed_at":"2020-07-07T00:40:08.000Z","size":136,"stargazers_count":375,"open_issues_count":18,"forks_count":25,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-18T12:34:15.606Z","etag":null,"topics":["electron","redux"],"latest_commit_sha":null,"homepage":"","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/samiskin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-09T21:28:06.000Z","updated_at":"2024-02-23T19:57:24.000Z","dependencies_parsed_at":"2022-09-04T00:50:31.844Z","dependency_job_id":null,"html_url":"https://github.com/samiskin/redux-electron-store","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samiskin%2Fredux-electron-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samiskin%2Fredux-electron-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samiskin%2Fredux-electron-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samiskin%2Fredux-electron-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samiskin","download_url":"https://codeload.github.com/samiskin/redux-electron-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254012919,"owners_count":21999333,"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","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":["electron","redux"],"created_at":"2024-08-04T01:00:58.978Z","updated_at":"2025-05-13T19:30:31.093Z","avatar_url":"https://github.com/samiskin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Other Integrations"],"sub_categories":["Electron"],"readme":"# redux-electron-store\n[![npm version](https://img.shields.io/npm/v/redux-electron-store.svg?style=flat-square)](https://www.npmjs.com/package/redux-electron-store)\n\nThis library solves the problem of synchronizing [Redux](https://github.com/rackt/redux/) stores in [Electron](https://github.com/atom/electron) apps. Electron is based on Chromium, and thus all Electron apps have a single [main process](https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md#differences-between-main-process-and-renderer-process) and (potentially) multiple renderer processes, one for each web page. `redux-electron-store` allows us to define a store per process, and uses [`ipc`](https://github.com/atom/electron/blob/master/docs/api/ipc-main.md) to keep them in sync.  It is implemented as a [redux store enhancer](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#store-enhancer).\n\nThis library __only__ works if the data in your store is __immutable__, as objects are compared by reference to determine changes.  The data being synchronized must also be pure JavaScript objects.\n\n## Installation\n\n```bash\nnpm i redux-electron-store --save\n```\n\n## Usage\n\n#### Main Process\n\n```javascript\nimport { createStore, applyMiddleware, compose } from 'redux';\nimport { electronEnhancer } from 'redux-electron-store';\n\nlet enhancer = compose(\n  applyMiddleware(...middleware),\n  // Must be placed after any enhancers which dispatch\n  // their own actions such as redux-thunk or redux-saga\n  electronEnhancer({\n    // Necessary for synched actions to pass through all enhancers\n    dispatchProxy: a =\u003e store.dispatch(a),\n  })\n);\n\n// Note: passing enhancer as the last argument to createStore requires redux@\u003e=3.1.0\nlet store = createStore(reducer, initialState, enhancer);\n```\n\n#### Renderer / Webview Process\n\n```javascript\nlet enhancer = compose(\n  applyMiddleware(...middleware),\n  electronEnhancer({\n    dispatchProxy: a =\u003e store.dispatch(a),\n  }),\n  DevTools.instrument()\n);\n\nlet store = createStore(reducer, initialState, enhancer);\n```\n\n#### Filters\n\nIn the renderer process, an important parameter that can improve performance is `filter`.  `filter` is a way of describing exactly what data this renderer process wishes to be notified of.  If a filter is provided, all updates which do not change a property which passes the filter will not be forwarded to the current renderer.\n\nA filter can be an `object`, a `function`, or `true`.\n\nIf the filter is `true`, the entire variable will pass through the filter.\n\nIf the filter is a `function`, the function will be called on every dispatch with the variable the filter is acting on as a parameter, and the return value of the function must itself be a filter (either an `object` or `true`)\n\nIf the filter is an `object`, its keys must be properties of the variable the filter is acting on, and its values are themselves filters which describe the value(s) of that property that will pass through the filter.\n\n**Example Problem**:\n\n\u003eI am creating a Notifications window for Slack's application.  For this to work, I need to know the position to display the notifications, the notifications themselves, and the icons for each team to display as a thumbnail.  Any other data in my app has no bearing on this window, therefore it would be a waste for this window to have updates for any other data sent to it.\n\n**Solution**:\n```javascript\n// Note: The Lodash library is being used here as _\nlet filter = {\n  notifications: true,\n  settings: {\n    notifyPosition: true\n  },\n  teams: (teams) =\u003e {\n    return _.mapValues(teams, (team) =\u003e {\n      return {icons: true};\n    });\n  }\n};\n```\n\nMore options are documented in the [api docs](https://github.com/samiskin/redux-electron-store/blob/master/docs/api.md), and a description of exactly how this library works is on the way.  \n\n#### Hot Reloading Reducers\n\n\nHot reloading of reducers needs to be done on both the renderer and the main process.  Doing this requires two things:\n\n- The renderer needs to inform the main process when it has reloaded\n  ```js\n  // In the renderer process\n  if (module.hot) {\n    module.hot.accept('../reducers', () =\u003e {\n      ipc.sendSync('renderer-reload');\n      store.replaceReducer(require('../reducers'))\n    });\n  }\n  ```\n\n- The main process needs to delete its cached `reducers` data\n  ```js\n  // In the main process\n  ipcMain.on('renderer-reload', (event, action) =\u003e {\n    delete require.cache[require.resolve('../reducers')];\n    store.replaceReducer(require('../reducers'));\n    event.returnValue = true;\n  });\n  ```\n  - Note: Individual reducer files may also need to be deleted from the cache if they have been required elsewhere in the application\n\n\n\n\n## How it works\n\n#### Initialization\n1. The main process creates its store\n2. When a renderer is created, it copies the current state from the main process for its own initial state\n3. The renderer then registers itself with the main process along with its \"filter\"\n\n#### Runtime\n1. An action occurs in either the renderer or the main process\n2. If it was in a renderer, the action is run through the reducer and forwarded to the main process\n3. The main process runs the action through the reducer\n4. The main process compares its state prior to the reduction with the new state, and with reference checks (hence the need for immutable data), it determines what data in its store changed\n5. The main process then iterates through each registered renderer. If the data that changed is described in that renderer's filter, the main process IPC's over an action with `data: { updated: {...}, deleted: {...} }` properties\n6. The renderers that receive that action will then merge in that data, thereby staying in sync with the main process, while not repeating the processing done by the reduction\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamiskin%2Fredux-electron-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamiskin%2Fredux-electron-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamiskin%2Fredux-electron-store/lists"}