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
• Quick start
• In depth
• Examples
  • Create an action with no payload and no meta
  • Create an action with payload and no meta
  • Create an action with payload and meta
  • Create an action with no payload and meta
  • Create an error action with no meta
  • Create an error action with meta
  • Customize action prefix
    • Sub-classing
    • Using setPrefix
• Usage in reducers
• Usage in production. Minification.
  • terser-webpack-plugin
  • create-react-app
  • Angular

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

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.