{"id":16368692,"url":"https://github.com/aigoncharov/flux-action-class","last_synced_at":"2025-06-25T07:34:58.952Z","repository":{"id":57239138,"uuid":"163684017","full_name":"aigoncharov/flux-action-class","owner":"aigoncharov","description":"Boilerplate free class-based action creator. Following flux-standard-action spec. Built with TypeScript. Works with redux and ngrx.","archived":false,"fork":false,"pushed_at":"2019-03-06T13:26:31.000Z","size":204,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T14:59:58.959Z","etag":null,"topics":["action","action-creator","flux","flux-actions","ngrx","redux","redux-actions","typescript"],"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/aigoncharov.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":"2018-12-31T16:45:13.000Z","updated_at":"2022-12-05T18:34:34.000Z","dependencies_parsed_at":"2022-08-30T00:11:09.038Z","dependency_job_id":null,"html_url":"https://github.com/aigoncharov/flux-action-class","commit_stats":null,"previous_names":["keenondrums/flux-action-class"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/aigoncharov/flux-action-class","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigoncharov%2Fflux-action-class","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigoncharov%2Fflux-action-class/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigoncharov%2Fflux-action-class/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigoncharov%2Fflux-action-class/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aigoncharov","download_url":"https://codeload.github.com/aigoncharov/flux-action-class/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigoncharov%2Fflux-action-class/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261827573,"owners_count":23215770,"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":["action","action-creator","flux","flux-actions","ngrx","redux","redux-actions","typescript"],"created_at":"2024-10-11T02:53:32.768Z","updated_at":"2025-06-25T07:34:58.934Z","avatar_url":"https://github.com/aigoncharov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flux-action-class [![Build Status](https://travis-ci.org/keenondrums/flux-action-class.svg?branch=master)](https://travis-ci.org/keenondrums/flux-action-class) [![Coverage Status](https://coveralls.io/repos/github/keenondrums/flux-action-class/badge.svg?branch=master)](https://coveralls.io/github/keenondrums/flux-action-class?branch=master) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Boilerplate%20free%20class-based%20action%20creator\u0026url=https://github.com/keenondrums/flux-action-class\u0026hashtags=javascript,typescript,flux,redux,ngrx,action,class)\n\nBoilerplate free class-based action creator. Following [flux-standard-action](https://github.com/redux-utilities/flux-standard-action) spec. Built with TypeScript. Works flawlessly with JavaScript and TypeScript right out of the box.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [Quick start](#quick-start)\n- [In depth](#in-depth)\n- [Examples](#examples)\n  - [Create an action with no payload and no meta](#create-an-action-with-no-payload-and-no-meta)\n  - [Create an action with payload and no meta](#create-an-action-with-payload-and-no-meta)\n  - [Create an action with payload and meta](#create-an-action-with-payload-and-meta)\n  - [Create an action with no payload and meta](#create-an-action-with-no-payload-and-meta)\n  - [Create an error action with no meta](#create-an-error-action-with-no-meta)\n  - [Create an error action with meta](#create-an-error-action-with-meta)\n  - [Customize action prefix](#customize-action-prefix)\n    - [Sub-classing](#sub-classing)\n    - [Using `setPrefix`](#using-setprefix)\n- [Usage in reducers](#usage-in-reducers)\n- [Usage in production. Minification.](#usage-in-production-minification)\n  - [terser-webpack-plugin](#terser-webpack-plugin)\n  - [create-react-app](#create-react-app)\n  - [Angular](#angular)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n```\nnpm i flux-action-class\n```\n\n## Quick start\n\n```ts\nimport { ActionStandard } from 'flux-action-class'\n\nclass ActionToDoIncrement extends ActionStandard {}\n// Creates action with no payload, no meta and type 'flux-action-class:ActionToDoIncrement'\n\nconst reducer = (state, action) =\u003e {\n  switch (action.type) {\n    case ActionToDoIncrement.type:\n    // Do stuff\n  }\n}\n```\n\n## In depth\n\n`ActionStandard` is an abstract class with two generics, payload and meta, set to `undefined` by default. It has:\n\n- Static `type` getter based on class' name to easily use it in your reducers\n- Own (non-static) `type` getter which uses the static one to comply with [flux-standard-action](https://github.com/redux-utilities/flux-standard-action)\n- Own (non-static) `payload` readonly field typed as the first generic (`undefined` by default)\n- Own (non-static) `meta` readonly field typed as the second generic (`undefined` by default)\n- Own (non-static) `error` readonly boolean field set to `true` if payload is an instance of `Error`\n- Protected static `prefix` field which is the the first part of `type` set to 'flux-action-class:' by default\n\n## Examples\n\n### Create an action with no payload and no meta\n\n```ts\nimport { ActionStandard } from 'flux-action-class'\n\nclass ActionTest1 extends ActionStandard {}\n// Creates action with no payload, no meta, type 'flux-action-class:ActionTest1' and error = false\n\n// TS compiler expects no arguments provided to the constructor\nnew ActionTest1() // Correct\nnew ActionTest1('test') // Failure\n```\n\n### Create an action with payload and no meta\n\n```ts\nimport { ActionStandard } from 'flux-action-class'\n\nclass ActionTest2 extends ActionStandard\u003cnumber\u003e {}\n// Creates action with payload of type number, no meta, type 'flux-action-class:ActionTest2' and error = false\n\n// TS compiler expects one argument provided to the constructor\nnew ActionTest2(5) // Correct\nnew ActionTest2() // Failure\nnew ActionTest2('test') // Failure\nnew ActionTest2(5, 'test') // Failure\n```\n\n### Create an action with payload and meta\n\n```ts\nimport { ActionStandard } from 'flux-action-class'\n\nclass ActionTest3 extends ActionStandard\u003cnumber, string\u003e {}\n// Creates action with payload of type number, meta of type string, type 'flux-action-class:ActionTest3' and error = false\n\n// TS compiler expects two arguments provided to the constructor\nnew ActionTest3(5, 'test') // Correct\nnew ActionTest3() // Failure\nnew ActionTest3('test') // Failure\nnew ActionTest3(5, 45) // Failure\n```\n\n### Create an action with no payload and meta\n\n```ts\nimport { ActionStandard } from 'flux-action-class'\n\nclass ActionTest4 extends ActionStandard\u003cundefined, string\u003e {}\n// Creates action with no payload, meta of type string, type 'flux-action-class:ActionTest4' and error = false\n\n// TS compiler expects two arguments provided to the constructor\nnew ActionTest4(undefined, 'test') // Correct\nnew ActionTest4() // Failure\nnew ActionTest4('test') // Failure\nnew ActionTest4(5, 45) // Failure\n```\n\n### Create an error action with no meta\n\n```ts\nimport { ActionStandard } from 'flux-action-class'\n\nclass ActionTest5 extends ActionStandard\u003cError\u003e {}\n// Creates action with error payload, no meta, type 'flux-action-class:ActionTest5' and error = true\n\n// TS compiler expects one argument provided to the constructor\nnew ActionTest5(new Error()) // Correct\nnew ActionTest3() // Failure\nnew ActionTest3('test') // Failure\nnew ActionTest3(5, 45) // Failure\n```\n\n### Create an error action with meta\n\n```ts\nimport { ActionStandard } from 'flux-action-class'\n\nclass ActionTest6 extends ActionStandard\u003cError, string\u003e {}\n// Creates action with error payload, meta of type string, type 'flux-action-class:ActionTest6' and error = true\n\n// TS compiler expects one argument provided to the constructor\nnew ActionTest6(new Error(), 'string') // Correct\nnew ActionTest6() // Failure\nnew ActionTest6('test') // Failure\nnew ActionTest6(5, 45) // Failure\n```\n\n### Customize action prefix\n\n#### Sub-classing\n\n```ts\nimport { ActionStandard } from 'flux-action-class'\n\nabstract class AppBaseAction\u003cPayload = undefined, Meta = undefined\u003e extends ActionStandard\u003cPayload, Meta\u003e {\n  protected static readonly prefix = 'app:'\n}\n\nclass ActionTest7 extends AppBaseAction {}\n// Creates action with no payload, no meta, type 'app:ActionTest7' and error = false\n```\n\n#### Using `setPrefix`\n\n```ts\nimport { ActionStandard, setPrefix } from 'flux-action-class'\n\n// Add it only once and it changes default prefix for all actions\nsetPrefix('app:')\n\nclass ActionTest7 extends ActionStandard {}\n// Creates action with no payload, no meta, type 'app:ActionTest7' and error = false\n```\n\n## Usage in reducers\n\nBe aware, if you're using `switch-case` based reducers, TS compiler is no longer capable of automatic union discrimination, in other words the compiler can no longer match action's type by its field `type`.\n\nConsider going with selecting a reducer from a map by key ([relevant article (go to Tip 3: Switch away from switch)](https://medium.com/@andreygoncharov/yet-another-guide-to-reduce-boilerplate-in-your-redux-ngrx-app-3794a2dd7bf), [Redux's official documentation](https://redux.js.org/recipes/reducing-boilerplate#generating-reducers)) or using [ngrx-actions](https://github.com/amcdnl/ngrx-actions) instead.\n\nYou can take a look at the discussion [here](https://github.com/keenondrums/flux-action-class/issues/1)\n\n## Usage in production. Minification.\n\nflux-action-class relies on class names and [Terser (Uglify)](https://github.com/terser-js/terser) by default doesn't preserve class names during minification. Here's what you can do to change that.\n\n### [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin)\n\nAdd `keep_classnames: true` (`keep_fnames: true` for ES5 targets) to `terserOptions`.\n\n```js\nmodule.exports = {\n  optimization: {\n    minimizer: [\n      new TerserPlugin({\n        terserOptions: {\n          // add this line\n          keep_classnames: true,\n        },\n      }),\n    ],\n  },\n}\n```\n\n### [create-react-app](https://github.com/facebook/create-react-app)\n\nCRA doesn't expose Terser config by default (please, upvote [this issue](https://github.com/facebook/create-react-app/issues/6471) to change it!). Rour options are:\n\n- Use [customize-cra](https://github.com/arackaf/customize-cra)\n- Do an `eject`\n- Fork react-scripts (read [this article](https://medium.com/@denis.zhbankov/maintaining-a-fork-of-create-react-app-as-an-alternative-to-ejecting-c555e8eb2b63) for further instructions)\n\nAfter that you can follow instructions for tuning terser-webpack-plugin listed above.\n\n### Angular\n\nUnfortunately, Angular team doesn't allow us to tune Terser with their default builder (please, upvote [this issue](https://github.com/angular/angular-cli/issues/3861) to change it!). You could use this [custom builder](https://github.com/keenondrums/angular-builder-custom-terser-options), which is just a subclass of their default builder with Terser-tuning added.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faigoncharov%2Fflux-action-class","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faigoncharov%2Fflux-action-class","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faigoncharov%2Fflux-action-class/lists"}