flux-action-class 
Boilerplate free class-based action creator. Following flux-standard-action spec. Built with TypeScript. Works flawlessly with JavaScript and TypeScript right out of the box.
Installation
npm i flux-action-class
Quick start
import { ActionStandard } from 'flux-action-class'
class ActionToDoIncrement extends ActionStandard {}
// Creates action with no payload, no meta and type 'flux-action-class:ActionToDoIncrement'
const reducer = (state, action) => {
switch (action.type) {
case ActionToDoIncrement.type:
// Do stuff
}
}In depth
ActionStandard is an abstract class with two generics, payload and meta, set to undefined by default. It has:
- Static
typegetter based on class' name to easily use it in your reducers - Own (non-static)
typegetter which uses the static one to comply with flux-standard-action - Own (non-static)
payloadreadonly field typed as the first generic (undefinedby default) - Own (non-static)
metareadonly field typed as the second generic (undefinedby default) - Own (non-static)
errorreadonly boolean field set totrueif payload is an instance ofError - Protected static
prefixfield which is the the first part oftypeset to 'flux-action-class:' by default
Examples
Create an action with no payload and no meta
import { ActionStandard } from 'flux-action-class'
class ActionTest1 extends ActionStandard {}
// Creates action with no payload, no meta, type 'flux-action-class:ActionTest1' and error = false
// TS compiler expects no arguments provided to the constructor
new ActionTest1() // Correct
new ActionTest1('test') // FailureCreate an action with payload and no meta
import { ActionStandard } from 'flux-action-class'
class ActionTest2 extends ActionStandard<number> {}
// Creates action with payload of type number, no meta, type 'flux-action-class:ActionTest2' and error = false
// TS compiler expects one argument provided to the constructor
new ActionTest2(5) // Correct
new ActionTest2() // Failure
new ActionTest2('test') // Failure
new ActionTest2(5, 'test') // FailureCreate an action with payload and meta
import { ActionStandard } from 'flux-action-class'
class ActionTest3 extends ActionStandard<number, string> {}
// Creates action with payload of type number, meta of type string, type 'flux-action-class:ActionTest3' and error = false
// TS compiler expects two arguments provided to the constructor
new ActionTest3(5, 'test') // Correct
new ActionTest3() // Failure
new ActionTest3('test') // Failure
new ActionTest3(5, 45) // FailureCreate an action with no payload and meta
import { ActionStandard } from 'flux-action-class'
class ActionTest4 extends ActionStandard<undefined, string> {}
// Creates action with no payload, meta of type string, type 'flux-action-class:ActionTest4' and error = false
// TS compiler expects two arguments provided to the constructor
new ActionTest4(undefined, 'test') // Correct
new ActionTest4() // Failure
new ActionTest4('test') // Failure
new ActionTest4(5, 45) // FailureCreate an error action with no meta
import { ActionStandard } from 'flux-action-class'
class ActionTest5 extends ActionStandard<Error> {}
// Creates action with error payload, no meta, type 'flux-action-class:ActionTest5' and error = true
// TS compiler expects one argument provided to the constructor
new ActionTest5(new Error()) // Correct
new ActionTest3() // Failure
new ActionTest3('test') // Failure
new ActionTest3(5, 45) // FailureCreate an error action with meta
import { ActionStandard } from 'flux-action-class'
class ActionTest6 extends ActionStandard<Error, string> {}
// Creates action with error payload, meta of type string, type 'flux-action-class:ActionTest6' and error = true
// TS compiler expects one argument provided to the constructor
new ActionTest6(new Error(), 'string') // Correct
new ActionTest6() // Failure
new ActionTest6('test') // Failure
new ActionTest6(5, 45) // FailureCustomize action prefix
Sub-classing
import { ActionStandard } from 'flux-action-class'
abstract class AppBaseAction<Payload = undefined, Meta = undefined> extends ActionStandard<Payload, Meta> {
protected static readonly prefix = 'app:'
}
class ActionTest7 extends AppBaseAction {}
// Creates action with no payload, no meta, type 'app:ActionTest7' and error = falseUsing setPrefix
import { ActionStandard, setPrefix } from 'flux-action-class'
// Add it only once and it changes default prefix for all actions
setPrefix('app:')
class ActionTest7 extends ActionStandard {}
// Creates action with no payload, no meta, type 'app:ActionTest7' and error = falseUsage in reducers
Be 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.
Consider going with selecting a reducer from a map by key (relevant article (go to Tip 3: Switch away from switch), Redux's official documentation) or using ngrx-actions instead.
You can take a look at the discussion here
Usage in production. Minification.
flux-action-class relies on class names and Terser (Uglify) by default doesn't preserve class names during minification. Here's what you can do to change that.
terser-webpack-plugin
Add keep_classnames: true (keep_fnames: true for ES5 targets) to terserOptions.
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
// add this line
keep_classnames: true,
},
}),
],
},
}create-react-app
CRA doesn't expose Terser config by default (please, upvote this issue to change it!). Rour options are:
- Use customize-cra
- Do an
eject - Fork react-scripts (read this article for further instructions)
After that you can follow instructions for tuning terser-webpack-plugin listed above.
Angular
Unfortunately, Angular team doesn't allow us to tune Terser with their default builder (please, upvote this issue to change it!). You could use this custom builder, which is just a subclass of their default builder with Terser-tuning added.