{"id":16430343,"url":"https://github.com/loiane/vscode-angular-ngrx","last_synced_at":"2025-03-23T07:34:32.098Z","repository":{"id":38896266,"uuid":"95983676","full_name":"loiane/vscode-angular-ngrx","owner":"loiane","description":"Angular ngrx extension for VSCode to help creating reducers, actions, effects and more","archived":false,"fork":false,"pushed_at":"2022-12-06T21:52:35.000Z","size":327,"stargazers_count":14,"open_issues_count":12,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T18:57:30.084Z","etag":null,"topics":["angular","ngrx","ngrx-effects","ngrx-store","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loiane.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-01T19:26:58.000Z","updated_at":"2024-12-21T15:00:07.000Z","dependencies_parsed_at":"2023-01-23T15:16:45.975Z","dependency_job_id":null,"html_url":"https://github.com/loiane/vscode-angular-ngrx","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/loiane%2Fvscode-angular-ngrx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loiane%2Fvscode-angular-ngrx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loiane%2Fvscode-angular-ngrx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loiane%2Fvscode-angular-ngrx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loiane","download_url":"https://codeload.github.com/loiane/vscode-angular-ngrx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245072304,"owners_count":20556353,"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","ngrx","ngrx-effects","ngrx-store","vscode","vscode-extension"],"created_at":"2024-10-11T08:26:37.731Z","updated_at":"2025-03-23T07:34:31.826Z","avatar_url":"https://github.com/loiane.png","language":"TypeScript","readme":"# VS Code Angular ngRx\n\n[![Version](http://vsmarketplacebadge.apphb.com/version/loiane.angular-ngrx.svg)](https://marketplace.visualstudio.com/items?itemName=loiane.angular-ngrx)\n[![Installs](http://vsmarketplacebadge.apphb.com/installs/loiane.angular-ngrx.svg)](https://marketplace.visualstudio.com/items?itemName=loiane.angular-ngrx)\n[![Build Status](https://travis-ci.org/loiane/vscode-angular-ngrx.svg?branch=master)](https://travis-ci.org/loiane/vscode-angular-ngrx)\n[![codecov](https://codecov.io/gh/loiane/vscode-angular-ngrx/branch/master/graph/badge.svg)](https://codecov.io/gh/loiane/vscode-angular-ngrx)\n[![bitHound Overall Score](https://www.bithound.io/github/loiane/vscode-angular-ngrx/badges/score.svg)](https://www.bithound.io/github/loiane/vscode-angular-ngrx)\n[![bitHound Code](https://www.bithound.io/github/loiane/vscode-angular-ngrx/badges/code.svg)](https://www.bithound.io/github/loiane/vscode-angular-ngrx)\n[![bitHound Dev Dependencies](https://www.bithound.io/github/loiane/vscode-angular-ngrx/badges/devDependencies.svg)](https://www.bithound.io/github/loiane/vscode-angular-ngrx/master/dependencies/npm)\n[![Greenkeeper badge](https://badges.greenkeeper.io/loiane/vscode-angular-ngrx.svg)](https://greenkeeper.io/)\n[![Known Vulnerabilities](https://snyk.io/test/github/loiane/vscode-angular-ngrx/badge.svg)](https://snyk.io/test/github/loiane/vscode-angular-ngrx)\n\nThis extension allows **quickly scaffolding ngRx file templates** (actions, reducers, effects and more) in VS Code Angular project based on @ngrx/platform (v4+).\n\nSnippets based on previous versions of @ngrx/store are also available.\n\n### Sample project\n\nThe following project had all ngRx files created with this extension: [link](github.com/loiane/angular-ngrx4-lazy-loading).\n\nThe sample project is organized in modules and uses lazy loading to ngrx as well. Based on ngrx/plataform (ngrx v4), which allows lazy loading of ngrx functionalities.\n\n## Features\n\nYou can find the following options been added to the context menu:\n\nMenu Options  |\n---           | \nNew ngrx app/store module|\nNew ngrx feature/store module| \n\n### Generate app/store directory + files \n\nRight click on `app` folder in your current project to generate the `app-store.module`.\nThis command will generate the following files:\n\n* `actions-creator.ts`\n* `app-state.ts`\n* `app-store.module.ts`\n* `store.service.ts`\n* `util.ts`\n\nThis extension creates a `app-store.module` with util files and also a module to manage the app state for the root level. This module needs to be imported in the `app.module` and all setup is completed!\n\n### Generate app/feature-module/store directory + files \n\nRight click on `app/feature-module` folder in your current project to generate the `feature-store.module`. You will be prompted to enter the feature name.\nThis command will generate the following files:\n\n* `feature-store.module.ts`\n* `feature-store.service.ts`\n* `feature.actions.ts`\n* `feature.effects.ts`\n* `feature.reducer.ts`\n* `feature.state.ts`\n\nThis extension creates a `feature-store.module` with actions, reducer file, feature-state, effects. The module contains the required setup for ngrx for a feature-module (lazy loaded). A `feature-store.service` is also created to organize `store.select` and `store.displach` logic (the service can be injected into a component to retrieve and dispatch the actions as needed). RxJS is used for selecting the state instead of `reselect`. Sample code for CRUD operations already included. Just needs to be imported in your `feature.module`. \n\n## Snippets - Usage\n\nCreate a new typescript file and type `ngrx-` to see the snippets available. Press `enter`, and the snippet unfolds.\n\n### ngRx Actions Snippets\nTrigger | Description\n--- | ---\nngrx-action-file| Accordion\nngrx-action-class | Accordion\nngrx-action-type | Accordion\nngrx-action-function  | Accordion\nngrx-action-factory| Accordion\n\n### ngRx Reducer Snippets\nTrigger | Description\n--- | ---\nngrx-reducer-file| Accordion\nngrx-reducer-feature-file | Accordion\nngrx-reducer-case | Accordion\n\n### ngRx Selector Snippets\nTrigger | Description\n--- | ---\nngrx-selector-file| Accordion\nngrx-selector | Accordion\n\n### ngRx Effects Snippets\nTrigger | Description\n--- | ---\nngrx-effects-file| Accordion\nngrx-effect | Accordion\n\n### ngRx State Snippets\nTrigger | Description\n--- | ---\nngrx-state-app| Accordion\nngrx-state-feature| Accordion\n\n### ngRx Setup\nTrigger | Description\n--- | ---\nngrx-setup-store-root| Accordion\nngrx-setup-store-feature| Accordion\nngrx-setup-effects-root| Accordion\nngrx-setup-effects-feature| Accordion\nngrx-setup-devtools| Accordion\n\n### ngRx Other Files\nTrigger | Description\n--- | ---\nngrx-util| Accordion\nngrx-store-service| Accordion\n\n## Installation\n\n1. Install Visual Studio Code 1.5.0 or higher\n2. Launch Code\n3. From the command palette `Ctrl`-`Shift`-`P` (Windows, Linux) or `Cmd`-`Shift`-`P` (OSX)\n4. Select `Install Extension`\n5. Type `angular ngrx` and press enter\n6. Reload Visual Studio Code\n\n## Release Notes\n\nSee the [CHANGELOG](CHANGELOG.md) for the latest changes.\n\n## Disclaimer\n\n**Important:** This extension due to the nature of it's purpose will create\nfiles on your hard drive and if necessary create the respective folder structure.\nWhile it should not override any files during this process, I'm not giving any guarantees\nor take any responsibility in case of lost data. \nAlways use version control!\n\n## License\n\nMIT\n\n**Enjoy!**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floiane%2Fvscode-angular-ngrx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floiane%2Fvscode-angular-ngrx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floiane%2Fvscode-angular-ngrx/lists"}