{"id":15435502,"url":"https://github.com/tripss/redux-clazz","last_synced_at":"2026-04-25T16:33:20.899Z","repository":{"id":57350416,"uuid":"97969808","full_name":"TriPSs/redux-clazz","owner":"TriPSs","description":"Connect ordinary classes to Redux.","archived":false,"fork":false,"pushed_at":"2018-09-28T11:29:05.000Z","size":28,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-26T08:22:24.627Z","etag":null,"topics":["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/TriPSs.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-07-21T17:00:20.000Z","updated_at":"2020-07-21T06:31:29.000Z","dependencies_parsed_at":"2022-08-28T19:00:27.364Z","dependency_job_id":null,"html_url":"https://github.com/TriPSs/redux-clazz","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TriPSs%2Fredux-clazz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TriPSs%2Fredux-clazz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TriPSs%2Fredux-clazz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TriPSs%2Fredux-clazz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TriPSs","download_url":"https://codeload.github.com/TriPSs/redux-clazz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245978277,"owners_count":20703678,"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":["redux"],"created_at":"2024-10-01T18:44:53.198Z","updated_at":"2026-04-25T16:33:20.844Z","avatar_url":"https://github.com/TriPSs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux-Clazz \n![https://img.shields.io/npm/v/redux-clazz.svg](https://img.shields.io/npm/v/redux-clazz.svg?style=flat-square) [![Build Status](https://travis-ci.org/TriPSs/redux-clazz.svg?branch=master\u0026style=flat-square)](https://travis-ci.org/TriPSs/redux-clazz?branch=master) [![availabledownloads](https://img.shields.io/npm/dt/redux-clazz.svg?maxAge=2592000\u0026style=flat-square)](https://npm-stat.com/charts.html?package=redux-clazz) [![](https://img.shields.io/github/issues-raw/tripss/redux-clazz.svg?style=flat-square)](https://github.com/tripss/redux-clazz/issues) [![](https://img.shields.io/david/tripss/redux-clazz.svg?style=flat-square)](https://david-dm.org/tripss/redux-clazz#info=dependencies)\n[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tripss/redux-clazz.svg)](http://isitmaintained.com/project/tripss/redux-clazz \"Average time to resolve an issue\") [![Percentage of issues still open](http://isitmaintained.com/badge/open/tripss/redux-clazz.svg)](http://isitmaintained.com/project/tripss/redux-clazz \"Percentage of issues still open\")\n\n\u003e Connect ordinary classes to Redux.\n\nRedux Clazz lets you connect any normal class to redux\n\nExample, first you need to create the store with `redux-clazz` (You can follow the normal process here, just make sure you import `createStore` from `redux-clazz`, the other are optional and it is possible to just import them from `redux` directly)\n```js\nimport { createStore, applyMiddleware, compose } from 'redux-clazz'\nimport thunk from 'redux-thunk'\nimport reducers from './reducers'\n\nconst middleware = [\n  thunk,\n]\n\n// Create Store\nconst store = createStore(\n  reducers,\n  initialState,\n  compose(\n    applyMiddleware(...middleware),\n  ),\n)\n\nreturn store\n\n```\n\nThe class container:\n```js\nimport { connect } from 'redux-clazz'\nimport OrdinaryClass from './OrdinaryClass'\n\nimport * as Actions from './Actions'\nimport * as Selectors from './Selectors'\n\nexport const mapStateToProps = state =\u003e ({\n  ordinaryProp: Selectors.getOrdinaryProp(state),\n  ordinaryPropNoSelector: state.myReducer.ordinaryProp,\n})\n\nexport default connect(mapStateToProps, { ...Actions })(OrdinaryClass)\n\n// To create a singleton\nexport default connect(mapStateToProps, { ...Actions }, true)(OrdinaryClass)\n\n```\n\nFinally, the class:\n```js\nimport ReduxClazz from 'redux-clazz'\n\nexport default class OrdinaryClass extends ReduxClazz {\n  \n  // All actions and props are available in here\n  props\n  \n  constructor(...props) {\n    super(props)\n  }\n  \n  clazzWillReceiveProps = (nextProps) =\u003e {\n    // This function will get fired when the props linked in mapStateToProps get updated ed\n  }\n  \n}\n```\n\n### Installation\n```shell\n$ npm install --save redux-clazz\n```\n\n## Development\n\nIf you'd like to contribute to this project, all you need to do is clone\nthis project and run:\n\n```shell\n$ npm install\n```\nYou can use `npm link` to use your development version in your own project:\n- Go to `redux-clazz` directory and execute command `npm link`\n- Go to your project directory and execute command `npm link redux-clazz`\n\n## [License](https://github.com/tripss/redux-clazz/blob/master/LICENSE)\n\n\u003e Internet Systems Consortium license\n\u003e ===================================\n\u003e\n\u003e The MIT License (MIT)\n\u003e  \n\u003e Copyright (c) 2015 David Zukowski\n\u003e  \n\u003e Permission is hereby granted, free of charge, to any person obtaining a copy\n\u003e of this software and associated documentation files (the \"Software\"), to deal\n\u003e in the Software without restriction, including without limitation the rights\n\u003e to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n\u003e copies of the Software, and to permit persons to whom the Software is\n\u003e furnished to do so, subject to the following conditions:\n\u003e  \n\u003e The above copyright notice and this permission notice shall be included in all\n\u003e copies or substantial portions of the Software.\n\u003e  \n\u003e THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n\u003e IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n\u003e FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n\u003e AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n\u003e LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n\u003e OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n\u003e SOFTWARE.\n\n## Collaboration\n\nIf you have questions or issues, please [open an issue](https://github.com/TriPSs/redux-clazz/issues)!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftripss%2Fredux-clazz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftripss%2Fredux-clazz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftripss%2Fredux-clazz/lists"}