{"id":13495637,"url":"https://github.com/amcdnl/ngrx-actions","last_synced_at":"2025-03-28T16:33:04.943Z","repository":{"id":57310895,"uuid":"116063989","full_name":"amcdnl/ngrx-actions","owner":"amcdnl","description":"⚡️ Actions and Reducer Utilities for NGRX","archived":true,"fork":false,"pushed_at":"2020-09-04T00:43:42.000Z","size":351,"stargazers_count":341,"open_issues_count":26,"forks_count":28,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-08T01:03:59.195Z","etag":null,"topics":["angular","ngrx","redux","state-management"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/amcdnl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-01-02T22:32:47.000Z","updated_at":"2023-12-11T17:34:47.000Z","dependencies_parsed_at":"2022-09-05T14:11:51.171Z","dependency_job_id":null,"html_url":"https://github.com/amcdnl/ngrx-actions","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/amcdnl%2Fngrx-actions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amcdnl%2Fngrx-actions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amcdnl%2Fngrx-actions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amcdnl%2Fngrx-actions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amcdnl","download_url":"https://codeload.github.com/amcdnl/ngrx-actions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246063148,"owners_count":20717751,"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","redux","state-management"],"created_at":"2024-07-31T19:01:36.637Z","updated_at":"2025-03-28T16:33:04.653Z","avatar_url":"https://github.com/amcdnl.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# NGRX Actions\n\nActions/reducer utility for NGRX. It provides a handful of functions to make NGRX/Redux more Angular-tastic.\n\n- `@Store(MyInitialState)`: Decorator for default state of a store.\n- `@Action(...MyActionClass: Action[])`: Decorator for a action function.\n- `@Effect(...MyActionClass: Action[])`: Decorator for a effect function.\n- `ofAction(MyActionClass)`: Lettable operator for NGRX Effects\n- `createReducer(MyStoreClass)`: Reducer bootstrap function\n- `@Select('my.prop')`: Select decorator\n\nInspired by [redux-act](https://github.com/pauldijou/redux-act) and [redux-actions](https://github.com/reduxactions/redux-actions) for Redux.\n\nSee [changelog](CHANGELOG.md) for latest changes.\n\n**NOTE: I recommend checking out my latest library called [NGXS](https://github.com/amcdnl/ngxs).**\n\n## Whats this for?\nThis is _sugar_ to help reduce boilerplate when using Redux patterns. That said, here's the high level of what it provides:\n\n- Reducers become classes so its more logical organization\n- Automatically creates new instances so you don't have to handle spreads everywhere\n- Enables better type checking inside your actions\n- Reduces having to pass type constants by using type checking\n\nIts dead simple (\u003c100LOC) and you can pick and choose where you want to use it.\n\n## Getting Started\nTo get started, lets install the package thru npm:\n\n```\nnpm i ngrx-actions --S\n```\n\n### Reducers\nNext, create an action just like you do with NGRX today:\n\n```javascript\nexport class MyAction {\n  readonly type = 'My Action';\n  constructor(public payload: MyObj) {}\n}\n```\n\nthen you create a class and decorate it with a `Store` decorator that contains\nthe initial state for your reducer. Within that class you define methods\ndecorated with the `Action` decorator with an argument of the action class\nyou want to match it on.\n\n```javascript\nimport { Store, Action } from 'ngrx-actions';\n\n@Store({\n    collection: [],\n    selections: [],\n    loading: false\n})\nexport class MyStore {\n    @Action(Load, Refresh)\n    load(state: MyState, action: Load) {\n        state.loading = true;\n    }\n\n    @Action(LoadSuccess)\n    loadSuccess(state: MyState, action: LoadSuccess) {\n        state.collection = [...action.payload];\n    }\n\n    @Action(Selection)\n    selection(state: MyState, action: Selection) {\n        state.selections = [...action.payload];\n    }\n\n    @Action(DeleteSuccess)\n    deleteSuccess(state: MyState, action: DeleteSuccess) {\n        const idx = state.collection.findIndex(r =\u003e r.myId === action.payload);\n        if (idx === -1) {\n          return state;\n        }\n        const collection = [...state.collection];\n        collection.splice(idx, 1);\n        return { ...state, collection };\n    }\n}\n```\n\nYou may notice, I don't return the state. Thats because if it doesn't see\na state returned from the action it inspects whether the state was an\nobject or array and automatically creates a new instance for you. If you are\nmutating deeply nested properties, you still need to deal with those yourself.\n\nYou can still return the state yourself and it won't mess with it. This is helpful\nfor if the state didn't change or you have some complex logic going on. This can be\nseen in the `deleteSuccess` action.\n\nAbove you may notice, the first action has multiple action classes. Thats because\nthe `@Action` decorator can accept single or multiple actions.\n\nTo hook it up to NGRX, all you have to do is call the `createReducer` function passing\nyour store. Now pass the `myReducer` just like you would a function with a switch statement inside.\n\n```javascript\nimport { createReducer } from 'ngrx-actions';\nexport function myReducer(state, action) { return createReducer(MyStore)(state, action); }\n```\n\nIn the above example, I return a function that returns my `createReducer`. This is because AoT\ncomplains stating `Function expressions are not supported in decorators` if we just assign\nthe `createReducer` method directly. This is a known issue and [other NGRX](https://github.com/ngrx/platform/issues/116) things suffer from it too.\n\nNext, pass that to your NGRX module just like normal:\n\n```javascript\n@NgModule({\n   imports: [\n      StoreModule.forRoot({\n         pizza: pizzaReducer\n      })\n   ]\n})\nexport class AppModule {}\n```\n\nOptionally you can also provide your store directly to the `NgrxActionsModule` and it will handle\ncreating the reducer for you and also enables the ability to use DI with your stores. So rather than\ndescribing in `forRoot` or `forFeature` with `StoreModule`, we call them on `NgrxActionsModule`.\n\n```javascript\n@NgModule({\n   imports: [\n      NgrxActionsModule.forRoot({\n         pizza: PizzaStore\n      })\n   ],\n   providers: [PizzaStore]\n})\nexport class AppModule {}\n```\n\n### Effects\nIf you want to use NGRX effects, I've created a lettable operator that will allow you to\npass the action class as the argument like this:\n\n```javascript\nimport { ofAction } from 'ngrx-actions';\n\n@Injectable()\nexport class MyEffects {\n    constructor(\n        private update$: Actions,\n        private myService: MyService\n    ) {}\n\n    @Effect()\n    Load$ = this.update$.pipe(\n        ofAction(Load),\n        switchMap(() =\u003e this.myService.getAll()),\n        map(res =\u003e new LoadSuccess(res))\n    );\n}\n```\n\nIn 3.x, we introduced a new decorator called `@Effect` that you can define in your store\nto perform async operations.\n\n```javascript\n@Store({ delievered: false })\nexport class PizzaStore {\n    constructor(private pizzaService: PizzaService) {}\n\n    @Action(DeliverPizza)\n    deliverPizza(state) {\n        state.delivered = false;\n    }\n\n    @Effect(DeliverPizza)\n    deliverPizzaToCustomer(state, { payload }: DeliverPizza) {\n        this.pizzaService.deliver(payload);\n    }\n}\n```\n\nEffects are always run after actions.\n\n### Selects\nWe didn't leave out selectors, there is a `Select` decorator that accepts a (deep) path string. This looks like:\n\n```javascript\n@Component({ ... })\nexport class MyComponent {\n    // Functions\n    @Select((state) =\u003e state.color) color$: Observable\u003cstring\u003e;\n\n    // Array of props\n    @Select(['my', 'prop', 'color']) color$: Observable\u003cstrinv\u003e;\n\n    // Deeply nested properties\n    @Select('my.prop.color') color$: Observable\u003cstring\u003e;\n\n    // Implied by the name of the member\n    @Select() color: Observable\u003cstring\u003e;\n\n    // Remap the slice to a new object\n    @Select(state =\u003e state.map(f =\u003e 'blue')) color$: Observable\u003cstring\u003e;\n}\n```\n\nThis can help clean up your store selects. To hook it up, in the `AppModule` you do:\n\n```javascript\nimport { NgrxActionsModule } from 'ngrx-actions';\n\n@NgModule({\n    imports: [NgrxActionsModule]\n})\nexport class AppModule {}\n```\n\nAnd you can start using it in any component. It also works with feature stores too. Note: The Select decorator has a limitation of lack of type checking due to [TypeScript#4881](https://github.com/Microsoft/TypeScript/issues/4881).\n\n## Common Questions\n- _What about composition?_ Well since it creates a normal reducer function, you can still use all the same composition fns you already use.\n- _Will this work with normal Redux?_ While its designed for Angular and NGRX it would work perfectly fine for normal Redux. If that gets requested, I'll be happy to add better support too.\n- _Do I have to rewrite my entire app to use this?_ No, you can use this in combination with the tranditional switch statements or whatever you are currently doing.\n- _Does it support AoT?_ Yes but see above example for details on implementation.\n- _Does this work with NGRX Dev Tools?_ Yes, it does.\n- _How does it work with testing?_ Everything should work the same way but don't forget if you use the selector tool to include that in your test runner though.\n\n## Community\n- [Reducing Boilerplate with NGRX-ACTIONS](https://medium.com/@amcdnl/reducing-the-boilerplate-with-ngrx-actions-8de42a190aac)\n- [Adventures in Angular: NGRX Boilerplate](https://devchat.tv/adv-in-angular/aia-174-reducing-boilerplate-redux-ngrx-patterns-angular-austin-mcdaniel)\n- [Introducing NGRX-Actions 3.0](https://medium.com/@amcdnl/introducing-ngrx-actions-3-0-557f6ce16678)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famcdnl%2Fngrx-actions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famcdnl%2Fngrx-actions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famcdnl%2Fngrx-actions/lists"}