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.
npm i flux-action-class
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
}
}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
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') // Failureimport { 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') // Failureimport { 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) // Failureimport { 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) // Failureimport { 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) // Failureimport { 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) // Failureimport { 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 = falseimport { 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 = falseBe 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
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.
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,
},
}),
],
},
}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.
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.