flux-action-class
v1.2.0
Published
Boilerplate free class-based action creator. Following flux-standard-action spec. Built with TypeScript.
Downloads
168
Readme
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
type
getter based on class' name to easily use it in your reducers - Own (non-static)
type
getter which uses the static one to comply with flux-standard-action - Own (non-static)
payload
readonly field typed as the first generic (undefined
by default) - Own (non-static)
meta
readonly field typed as the second generic (undefined
by default) - Own (non-static)
error
readonly boolean field set totrue
if payload is an instance ofError
- Protected static
prefix
field which is the the first part oftype
set 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') // Failure
Create 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') // Failure
Create 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) // Failure
Create 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) // Failure
Create 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) // Failure
Create 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) // Failure
Customize 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 = false
Using 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 = false
Usage 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