Have ideas to improve npm?Join in the discussion! »

    flux-action-class
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    flux-action-class Build Status

    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 to true if payload is an instance of Error
    • Protected static prefix field which is the the first part of type 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

    Install

    npm i flux-action-class

    DownloadsWeekly Downloads

    24

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar