{"id":16675940,"url":"https://github.com/lastmjs/redux-store-element","last_synced_at":"2025-03-17T00:32:12.529Z","repository":{"id":57351688,"uuid":"55186721","full_name":"lastmjs/redux-store-element","owner":"lastmjs","description":"A custom element allowing a more declarative use of Redux.","archived":false,"fork":false,"pushed_at":"2019-12-21T22:48:49.000Z","size":853,"stargazers_count":82,"open_issues_count":17,"forks_count":3,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-13T08:33:12.695Z","etag":null,"topics":["angular","custom-elements","lit-html","polymer","redux","skatejs","vuejs","webcomponents"],"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/lastmjs.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":"2016-03-31T22:19:36.000Z","updated_at":"2024-06-20T01:57:14.000Z","dependencies_parsed_at":"2022-08-31T05:01:47.205Z","dependency_job_id":null,"html_url":"https://github.com/lastmjs/redux-store-element","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastmjs%2Fredux-store-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastmjs%2Fredux-store-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastmjs%2Fredux-store-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastmjs%2Fredux-store-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lastmjs","download_url":"https://codeload.github.com/lastmjs/redux-store-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221669317,"owners_count":16860853,"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":["angular","custom-elements","lit-html","polymer","redux","skatejs","vuejs","webcomponents"],"created_at":"2024-10-12T13:08:32.502Z","updated_at":"2024-10-27T11:35:17.540Z","avatar_url":"https://github.com/lastmjs.png","language":"JavaScript","funding_links":[],"categories":["Marks","Patterns"],"sub_categories":["[Polymer - Build modern apps using web components](https://www.polymer-project.org)","Managing State","🌎 [Polymer - Build modern apps using web components](www.polymer-project.org)"],"readme":"[![CircleCI](https://circleci.com/gh/lastmjs/redux-store-element.svg?style=shield)](https://circleci.com/gh/lastmjs/redux-store-element) [![npm version](https://img.shields.io/npm/v/redux-store-element.svg?style=flat)](https://www.npmjs.com/package/redux-store-element) [![dependency Status](https://david-dm.org/lastmjs/redux-store-element/status.svg)](https://david-dm.org/lastmjs/redux-store-element) [![devDependency Status](https://david-dm.org/lastmjs/redux-store-element/dev-status.svg)](https://david-dm.org/lastmjs/redux-store-element?type=dev) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/lastmjs/redux-store-element)\n\n# \u0026lt;redux-store\u0026gt;\nA custom element allowing a more declarative use of Redux.\n\n# Introduction\nThis custom element offers the basic Redux API declaratively. Because this is a custom element based on the [web components](https://www.webcomponents.org/) standards, it should be compatible with all major front-end JavaScript frameworks and libraries that interoperate with custom elements, including [Polymer](https://github.com/Polymer/polymer), [SkateJS](https://github.com/skatejs/skatejs), [Vue.js](https://github.com/vuejs/vue), [Angular](https://github.com/angular/angular), vanilla JavaScript, etc. See [here](https://custom-elements-everywhere.com/) for more information on interoperability of other frameworks and libraries with custom elements.\n\n## Simple and Declarative\nBefore we begin, I just want to highlight how easy it is to work with this element declaratively (using Polymer data binding syntax):\n\n* Hook up your root reducer (similar to Redux `createStore`):\n\n  ```\n  // HTML\n  \u003credux-store root-reducer=\"[[rootReducer]]\"\u003e\u003c/redux-store\u003e\n\n  // JS\n  import {RootReducer} from '../../redux/reducers';\n\n  ...\n\n  connectedCallback() {\n    this.rootReducer = RootReducer;\n  }\n  ```\n* Dispatch actions (similar to Redux `dispatch`):\n\n  ```\n  // HTML\n  \u003credux-store action=\"[[action]]\"\u003e\u003c/redux-store\u003e\n\n  // JS\n  fireAnAction() {\n    this.action = {\n      type: 'CHANGE_THE_STATE'\n    };\n  }\n  ```\n* Listen for state changes (similar to Redux `subscribe`):\n\n  ```\n  // HTML\n  \u003credux-store on-statechange=\"stateChange\"\u003e\u003c/redux-store\u003e\n\n  [[valueToBind]]\n\n  // JS\n  stateChange(e) {\n    const state = e.detail.state;\n\n    this.valueToBind = state.valueToBind;\n  }\n  ```\n* Explicitly grab the state (similar to Redux `getState`):\n\n  ```\n  // HTML\n  \u003credux-store id=\"redux-store-element\"\u003e\u003c/redux-store\u003e\n\n  // JS\n  getReduxState() {\n    const reduxStoreElement = this.querySelector('#redux-store-element');\n    const state = reduxStoreElement.getState();\n  }\n  ```\n\n# Installation and Setup\nRun the following:\n```\nnpm install redux-store-element\n```\n\nNow import `redux-store-element.js`:\n```\n// HTML\n\u003cscript type=\"module\" src=\"node_modules/redux-store-element/redux-store-element.js\"\u003e\n\n// JavaScript\n\nimport 'redux-store-element';\n\n```\n\nThis custom element depends on the custom elements and HTML imports web component specifications, which are not supported by all browsers yet. Include the webcomponentjs polyfills to ensure support across all modern browsers:\n```\n// CONSOLE\nnpm install --save @webcomponents/webcomponentsjs\n\n// HTML\n\u003cscript src=\"node_modules/webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n```\n\nThis custom element also depends on native ES Modules support and bare specifier support. Use a bundler like [Rollup](https://github.com/rollup/rollup) or [Webpack](https://github.com/webpack/webpack) if your environment doesn't support ES Modules. If your environment does support ES Modules and you do not wish to use a bundler, you will need to use a static file server that provides rewrites for bare specifiers like [Polyserve](https://github.com/Polymer/polyserve) or [Zwitterion](https://github.com/lastmjs/zwitterion).\n\nThe following examples are written with Polymer. It shouldn't be too hard to adapt them to other libraries and frameworks, keeping in mind their data binding systems and DOM interactions. This documentation is outdated, using HTML Imports instead of ES Modules, and will be updated in the future:\n\n## Creating the root reducer\nAt some point before you begin dispatching actions, you need to pass in your root reducer to any `\u003credux-store\u003e\u003c/redux-store\u003e` element through the root-reducer attribute. From the example:\n```\n\u003clink rel=\"import\" href=\"../../../lib/bower_components/polymer/polymer.html\"\u003e\n\n\u003clink rel=\"import\" href=\"../../../src/redux-store.html\"\u003e\n\u003clink rel=\"import\" href=\"../input-area/input-area.component.html\"\u003e\n\u003clink rel=\"import\" href=\"../text/text.component.html\"\u003e\n\n\u003cdom-module id=\"test-app\"\u003e\n    \u003ctemplate\u003e\n        \u003credux-store root-reducer=\"[[rootReducer]]\"\u003e\u003c/redux-store\u003e\n        \u003ctest-input-area\u003e\u003c/test-input-area\u003e\n        \u003ctest-text\u003e\u003c/test-text\u003e\n    \u003c/template\u003e\n\n    \u003cscript\u003e\n        Polymer({\n            is: 'test-app',\n            ready: function() {\n\n                var initialState = {\n                    temp: 'initial temp'\n                };\n\n                this.rootReducer = function(state, action) {\n\n                    if (!state) {\n                        return initialState;\n                    }\n\n                    switch(action.type) {\n                        case 'CHANGE_TEMP': {\n                            var newState = Object.assign({}, state);\n\n                            newState.temp = action.newTemp;\n\n                            return newState;\n                        }\n                        default: {\n                            return state;\n                        }\n                    };\n                };\n\n            }\n        });\n    \u003c/script\u003e\n\u003c/dom-module\u003e\n\n```\n\n## Subscribing to state changes\nIf your component needs to listen to state changes, simply pop a `\u003credux-store\u003e\u003c/redux-store\u003e` element in and pass a listener function name in for the `statechange` event. From the example:\n\n```\n\u003clink rel=\"import\" href=\"../../../lib/bower_components/polymer/polymer.html\"\u003e\n\n\u003clink rel=\"import\" href=\"../../../src/redux-store.html\"\u003e\n\n\u003cdom-module id=\"test-text\"\u003e\n    \u003ctemplate\u003e\n        \u003credux-store on-statechange=\"mapStateToThis\"\u003e\u003c/redux-store\u003e\n\n        \u003cdiv id=\"testText\"\u003eText from input above will go here\u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003cscript\u003e\n        Polymer({\n            is: 'test-text',\n            mapStateToThis: function(e) {\n                this.$.testText.innerHTML = e.detail.state.temp;\n            }\n        });\n    \u003c/script\u003e\n\u003c/dom-module\u003e\n```\n\n## Dispatching actions\nTo dispatch from within an element, first bind the action property of the element to the action property on `\u003credux-store\u003e\u003c/redux-store\u003e`. When you are ready to dispatch an action, set the action property on the element to the action that you want to dispatch. From the example:\n\n```\n\u003clink rel=\"import\" href=\"../../../src/redux-store.html\"\u003e\n\n\u003cdom-module id=\"test-input-area\"\u003e\n    \u003ctemplate\u003e\n        \u003credux-store action=\"[[action]]\"\u003e\u003c/redux-store\u003e\n\n        \u003cinput id=\"testInput\" type=\"text\"\u003e\n        \u003cbutton on-click=\"handleClick\"\u003eDispatch\u003c/button\u003e\n    \u003c/template\u003e\n\n    \u003cscript\u003e\n        Polymer({\n            is: 'test-input-area',\n            handleClick: function(e) {\n                this.action = {\n                    type: 'CHANGE_TEMP',\n                    newTemp: this.$.testInput.value\n                };\n            }\n        });\n    \u003c/script\u003e\n\u003c/dom-module\u003e\n```\n\n## Multiple Stores\nBy default, there is one store for the entire application, meaning that each instance of a `\u003credux-store\u003e\u003c/redux-store\u003e` will use the same store. You can however use multiple stores if you've determined it is necessary for your application. Simply reference the store name as follows:\n\n* Hook up your root reducer: `\u003credux-store root-reducer=\"[[rootReducer]]\" store-name=\"fooStore\"\u003e\u003c/redux-store\u003e`\n* Dispatch actions: `\u003credux-store action=\"[[action]]\" store-name=\"fooStore\"\u003e\u003c/redux-store\u003e`\n* Listen for state changes: `\u003credux-store on-statechange=\"mapStateToThis\" store-name=\"fooStore\"\u003e\u003c/redux-store\u003e`\n\n## Important Things to Know:\n* Your runtime environment must support ES Modules natively. Check [here](https://caniuse.com/#feat=es6-module) for compatibility\n* You must pass in your root reducer to any `\u003credux-store\u003e\u003c/redux-store\u003e` before actions will be dispatched and state change events raised\n* By default there is one store for the entire application. Each instance of a `\u003credux-store\u003e\u003c/redux-store\u003e` will use the same store\n* The `statechange` event supplies the redux state in the `detail.state` property of the event\n\n## Development\n```\nnpm install\nnpm run test-window\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flastmjs%2Fredux-store-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flastmjs%2Fredux-store-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flastmjs%2Fredux-store-element/lists"}