{"id":13509147,"url":"https://github.com/angular-redux/ng-redux","last_synced_at":"2025-12-12T04:13:13.821Z","repository":{"id":35559577,"uuid":"39831404","full_name":"angular-redux/ng-redux","owner":"angular-redux","description":"Angular bindings for Redux","archived":false,"fork":false,"pushed_at":"2023-04-16T16:29:22.000Z","size":2054,"stargazers_count":1150,"open_issues_count":44,"forks_count":175,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-10-21T11:52:30.368Z","etag":null,"topics":[],"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/angular-redux.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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}},"created_at":"2015-07-28T12:01:42.000Z","updated_at":"2025-10-15T10:41:40.000Z","dependencies_parsed_at":"2024-04-20T06:37:10.675Z","dependency_job_id":"23197beb-6ddb-403e-8433-41194b8e92f3","html_url":"https://github.com/angular-redux/ng-redux","commit_stats":null,"previous_names":["wbuchwalter/ng-redux"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/angular-redux/ng-redux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux%2Fng-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux%2Fng-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux%2Fng-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux%2Fng-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-redux","download_url":"https://codeload.github.com/angular-redux/ng-redux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux%2Fng-redux/sbom","scorecard":{"id":196220,"data":{"date":"2025-08-11","repo":{"name":"github.com/angular-redux/ng-redux","commit":"0bce20e0cd71c6e5542e27e5c403bfa8db088660"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":2,"reason":"Found 6/21 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 18 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"52 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-675m-85rw-j3w4","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-2m96-9w4j-wgv7","Warn: Project is vulnerable to: GHSA-h726-x36v-rx45","Warn: Project is vulnerable to: GHSA-5947-m4fg-xhqg","Warn: Project is vulnerable to: GHSA-779f-wgxg-qr8f","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-7xcx-6wjh-7xp2","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T21:53:08.418Z","repository_id":35559577,"created_at":"2025-08-16T21:53:08.419Z","updated_at":"2025-08-16T21:53:08.419Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280893614,"owners_count":26409280,"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-10-25T02:00:06.499Z","response_time":81,"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-08-01T02:01:03.574Z","updated_at":"2025-10-25T02:11:46.539Z","avatar_url":"https://github.com/angular-redux.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","angular"],"sub_categories":[],"readme":"# ng-redux\n###### Angular bindings for [Redux](https://github.com/gaearon/redux).\n\nFor Angular 2+ see [angular-redux/store](https://github.com/angular-redux/store) -- made by the same people that started `ng-redux`.\n\n[![build status](https://img.shields.io/travis/angular-redux/ng-redux/master.svg?style=flat-square)](https://travis-ci.org/ng-redux/ng-redux)\n[![npm version](https://img.shields.io/npm/v/ng-redux.svg?style=flat-square)](https://www.npmjs.com/package/ng-redux)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-green.svg)](https://conventionalcommits.org)\n\n\n*ngRedux lets you easily connect your angular components with Redux.*\n\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [API](#api)\n- [Dependency Injectable Middleware](#dependency-injectable-middleware)\n- [Routers](#routers)\n- [Config](#config)\n- [Using DevTools](#using-devtools)\n- [Additional Resources](#additional-resources)\n\n\n## Installation\n#### npm\n\n```js\nnpm install --save ng-redux\n```\n\n#### bower (deprecated)\n**Warning!** Starting with 4.0.0, we will no longer be publishing new releases on Bower. You can continue using Bower for old releases, or point your bower config to the UMD build hosted on unpkg that mirrors our npm releases.\n\n```json\n{\n  \"dependencies\": {\n    \"ng-redux\": \"https://unpkg.com/ng-redux/umd/ng-redux.min.js\"\n  }\n}\n```\n\nAdd the following script tag to your html:\n```html\n\u003cscript src=\"bower_components/ng-redux/dist/ng-redux.js\"\u003e\u003c/script\u003e\n```\n\nOr directly from unpkg\n```html\n\u003cscript src=\"https://unpkg.com/ng-redux/umd/ng-redux.min.js\"\u003e\u003c/script\u003e\n```\n\n## Quick Start\n\n#### Initialization\n\nThere are three ways to instantiate ngRedux:\n\n1. [createStoreWith](#createStoreWith)\n2. [provideStore](#provideStore)\n3. [createStore](#createStore)\n\n##### createStoreWith\n\nYou can either pass a function or an object to `createStoreWith`.\n\nWith a function:\n\n```JS\nimport reducers from './reducers';\nimport { combineReducers } from 'redux';\nimport loggingMiddleware from './loggingMiddleware';\nimport ngRedux from 'ng-redux';\n\nangular.module('app', [ngRedux])\n.config(($ngReduxProvider) =\u003e {\n    let reducer = combineReducers(reducers);\n    $ngReduxProvider.createStoreWith(reducer, ['promiseMiddleware', loggingMiddleware]);\n  });\n```\n\nWith an object:\n\n```JS\nimport reducers from './reducers';\nimport loggingMiddleware from './loggingMiddleware';\nimport ngRedux from 'ng-redux';\nimport reducer3 from './reducer3';\n\nangular.module('app', [ngRedux])\n.config(($ngReduxProvider) =\u003e {\n\treducer3 = function(state, action){}\n    $ngReduxProvider.createStoreWith({\n\t\treducer1: \"reducer1\",\n\t\treducer2: function(state, action){},\n\t\treducer3: reducer3\n\t }, ['promiseMiddleware', loggingMiddleware]);\n  });\n```\nIn this example `reducer1` will be resolved using angular's DI after the config phase.\n\n##### provideStore\n\nYou can pass an already existing store to ngRedux using `provideStore`:\n\n```JS\nimport reducers from './reducers';\nimport { createStore, combineReducers } from 'redux';\nimport ngRedux from 'ng-redux';\n\nconst reducer = combineReducers(reducers);\nconst store = createStore(reducer);\n\nangular.module('app', [ngRedux])\n.config(($ngReduxProvider) =\u003e {\n    $ngReduxProvider.provideStore(store);\n  });\n```\n\n##### createStore\n\n`createStore` allows you take full control over the store creation. This is handy\nif you want to control the order of enhancers by your self. It takes a function \nthat gets middlewares and enhancers from ngRedux as a parameters. Note that\nmiddlewares provided by ngRedux needs to be last ones.\n\n```JS\nimport reducers from './reducers';\nimport { createStore, combineReducers } from 'redux';\nimport thunk from 'redux-thunk';\nimport ngRedux from 'ng-redux';\n\nconst reducer = combineReducers(reducers);\n\nangular.module('app', [ngRedux])\n.config(($ngReduxProvider) =\u003e {\n    $ngReduxProvider.createStore((middlewares, enhancers) =\u003e {\n        return createStore(\n          reducer,\n          {},\n          compose(applyMiddleware(thunk, ...middlewares), ...enhancers)\n        )\n    });\n  });\n```\n\n#### Usage\n\n*Using controllerAs syntax*\n```JS\nimport * as CounterActions from '../actions/counter';\n\nclass CounterController {\n  constructor($ngRedux, $scope) {\n    /* ngRedux will merge the requested state's slice and actions onto this,\n    you don't need to redefine them in your controller */\n\n    let unsubscribe = $ngRedux.connect(this.mapStateToThis, CounterActions)(this);\n    $scope.$on('$destroy', unsubscribe);\n  }\n\n  // Which part of the Redux global state does our component want to receive?\n  mapStateToThis(state) {\n    return {\n      value: state.counter\n    };\n  }\n}\n```\n\n```HTML\n\u003cdiv\u003e\n    \u003cp\u003eClicked: {{counter.value}} times \u003c/p\u003e\n    \u003cbutton ng-click='counter.increment()'\u003e+\u003c/button\u003e\n    \u003cbutton ng-click='counter.decrement()'\u003e-\u003c/button\u003e\n    \u003cbutton ng-click='counter.incrementIfOdd()'\u003eIncrement if odd\u003c/button\u003e\n    \u003cbutton ng-click='counter.incrementAsync()'\u003eIncrement Async\u003c/button\u003e\n\u003c/div\u003e\n```\n\n## API\n\n### `createStoreWith(reducer, [middlewares], [storeEnhancers], [initialState])`\n\nCreates the Redux store, and allow `connect()` to access it.\n\n#### Arguments:\n* `reducer` \\(*Function*): A single reducer composed of all other reducers (create with redux.combineReducer)\n* [`middlewares`] \\(*Function[]*): Optional, An array containing all the middleware that should be applied. Functions and strings are both valid members. String will be resolved via Angular, allowing you to use dependency injection in your middlewares.\n* [`storeEnhancers`] \\(*Function[]*): Optional, this will be used to create the store, in most cases you don't need to pass anything, see [Store Enhancer official documentation.](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#store-enhancer)\n* [`initialState`] \\(*Object*): Optional, the initial state of your Redux store.\n\n\n### `connect(mapStateToTarget, [mapDispatchToTarget])(target)`\n\nConnects an Angular component to Redux.\n\n#### Arguments\n* `mapStateToTarget` \\(*Function*): connect will subscribe to Redux store updates. Any time it updates, mapStateToTarget will be called. Its result must be a plain object or a function returning a plain object, and it will be merged into `target`. If you have a component which simply triggers actions without needing any state you can pass null to `mapStateToTarget`.\n* [`mapDispatchToTarget`] \\(*Object* or *Function*): Optional. If an object is passed, each function inside it will be assumed to be a Redux action creator. An object with the same function names, but bound to a Redux store, will be merged onto `target`. If a function is passed, it will be given `dispatch`. It’s up to you to return an object that somehow uses `dispatch` to bind action creators in your own way. (Tip: you may use the [`bindActionCreators()`](http://gaearon.github.io/redux/docs/api/bindActionCreators.html) helper from Redux.).\n\n*You then need to invoke the function a second time, with `target` as parameter:*\n* `target` \\(*Object* or *Function*): If passed an object, the results of `mapStateToTarget` and `mapDispatchToTarget` will be merged onto it. If passed a function, the function will receive the results of `mapStateToTarget` and `mapDispatchToTarget` as parameters.\n\ne.g:\n```JS\nconnect(this.mapState, this.mapDispatch)(this);\n//Or\nconnect(this.mapState, this.mapDispatch)((selectedState, actions) =\u003e {/* ... */});\n\n```\n#### Returns\nReturns a *Function* allowing to unsubscribe from further store updates.\n\n#### Remarks\n* The `mapStateToTarget` function takes a single argument of the entire Redux store’s state and returns an object to be passed as props. It is often called a selector. Use reselect to efficiently compose selectors and compute derived data. You can also choose to use per-instance memoization by having a `mapStateToTarget` function returning a function of state, see [Sharing selectors across multiple components](https://github.com/reactjs/reselect#user-content-sharing-selectors-with-props-across-multiple-components)\n\n\n\n### Store API\nAll of redux's store methods (i.e. `dispatch`, `subscribe` and `getState`) are exposed by $ngRedux and can be accessed directly. For example:\n\n```JS\n$ngRedux.subscribe(() =\u003e {\n    let state = $ngRedux.getState();\n    //...\n})\n```\n\nThis means that you are free to use Redux basic API in advanced cases where `connect`'s API would not fill your needs.\n\n## Dependency Injectable Middleware\nYou can use angularjs dependency injection mechanism to resolve dependencies inside a `middleware`.\nTo do so, define a factory returning a middleware:\n\n```Javascript\nfunction myInjectableMiddleware($http, anotherDependency) {\n    return store =\u003e next =\u003e action =\u003e {\n        //middleware's code\n    }\n}\n\nangular.factory('myInjectableMiddleware', myInjectableMiddleware);\n```\n\nAnd simply register your middleware during store creation:\n\n```Javascript\n$ngReduxProvider.createStoreWith(reducers, [thunk, 'myInjectableMiddleware']);\n```\n\nMiddlewares passed as **string** will then be resolved throught angular's injector.\n\n## Config\n\n### Debouncing the digest\nYou can debounce the digest triggered by store modification (usefull in huge apps with a  lot of store modifications) by passing a config parameter to the `ngReduxProvider`.\n\n```javascript\nimport angular from 'angular';\n\nangular.module('ngapplication').config(($ngReduxProvider) =\u003e {\n  'ngInject';\n\n  // eslint-disable-next-line\n  $ngReduxProvider.config.debounce = {\n    wait: 100,\n    maxWait: 500,\n  };\n});\n```\n\nThis will debounce the digest for 100ms with a maximum delay time of 500ms. Every store modification within this time will be handled by this delayed digest.\n\n[lodash.debounce](https://lodash.com/docs/4.17.4#debounce) is used for the debouncing.\n\n## Routers\nSee [redux-ui-router](https://github.com/neilff/redux-ui-router) to make ng-redux and UI-Router work together. \u003cbr\u003e\nSee [ng-redux-router](https://github.com/amitport/ng-redux-router) to make ng-redux and angular-route work together.\n\n## Using DevTools\nThere are two options for using Redux DevTools with your angular app.  The first option is to use the [redux-devtools package] (https://www.npmjs.com/package/redux-devtools),\nand the other option is to use the [Redux DevTools Extension] (https://github.com/zalmoxisus/redux-devtools-extension#usage).  The Redux DevTools Extension does not\nrequire adding the react, react-redux, or redux-devtools packages to your project.\n\nTo use the redux-devtools package, you need to install [react](https://www.npmjs.com/package/react), [react-redux](https://www.npmjs.com/package/react-redux) and [redux-devtools](https://www.npmjs.com/package/redux-devtools) as development dependencies.\n\n```JS\n[...]\nimport { devTools, persistState } from 'redux-devtools';\nimport { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';\nimport React, { Component } from 'react';\n\nangular.module('app', ['ngRedux'])\n  .config(($ngReduxProvider) =\u003e {\n      $ngReduxProvider.createStoreWith(rootReducer, [thunk], [devTools()]);\n    })\n  .run(($ngRedux, $rootScope, $timeout) =\u003e {\n    React.render(\n      \u003cApp store={ $ngRedux }/\u003e,\n      document.getElementById('devTools')\n    );\n\n    //To reflect state changes when disabling/enabling actions via the monitor\n    //there is probably a smarter way to achieve that\n    $ngRedux.subscribe(() =\u003e {\n        $timeout(() =\u003e {$rootScope.$apply(() =\u003e {})}, 100);\n    });\n  });\n\n  class App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cDebugPanel top right bottom\u003e\n          \u003cDevTools store={ this.props.store } monitor = { LogMonitor } /\u003e\n        \u003c/DebugPanel\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n```HTML\n\u003cbody\u003e\n    \u003cdiv ng-app='app'\u003e\n      [...]\n    \u003c/div\u003e\n    \u003cdiv id=\"devTools\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n\nTo use the Redux DevTools extension, you must first make sure that you have installed the [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension#installation).\n\n```JS\nangular.module('app', ['ngRedux'])\n  .config(($ngReduxProvider) =\u003e {\n      $ngReduxProvider.createStoreWith(rootReducer, [thunk], [window.__REDUX_DEVTOOLS_EXTENSION__()]);\n    })\n  .run(($ngRedux, $rootScope, $timeout) =\u003e {\n    //To reflect state changes when disabling/enabling actions via the monitor\n    //there is probably a smarter way to achieve that\n    $ngRedux.subscribe(() =\u003e {\n        $timeout(() =\u003e {$rootScope.$apply(() =\u003e {})}, 100);\n    });\n  });\n```\n\n## Additional Resources\n* [Managing state with Redux and Angular](http://blog.rangle.io/managing-state-redux-angular/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-redux%2Fng-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-redux%2Fng-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-redux%2Fng-redux/lists"}