- Notifications
You must be signed in to change notification settings - Fork1
Boilerplate free class-based action creator. Following flux-standard-action spec. Built with TypeScript. Works with redux and ngrx.
License
fxlrnrpt/flux-action-class
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Boilerplate free class-based action creator. Followingflux-standard-action spec. Built with TypeScript. Works flawlessly with JavaScript and TypeScript right out of the box.
npm i flux-action-classimport{ActionStandard}from'flux-action-class'classActionToDoIncrementextendsActionStandard{}// Creates action with no payload, no meta and type 'flux-action-class:ActionToDoIncrement'constreducer=(state,action)=>{switch(action.type){caseActionToDoIncrement.type:// Do stuff}}
ActionStandard is an abstract class with two generics, payload and meta, set toundefined 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 withflux-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'classActionTest1extendsActionStandard{}// Creates action with no payload, no meta, type 'flux-action-class:ActionTest1' and error = false// TS compiler expects no arguments provided to the constructornewActionTest1()// CorrectnewActionTest1('test')// Failure
import{ActionStandard}from'flux-action-class'classActionTest2extendsActionStandard<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 constructornewActionTest2(5)// CorrectnewActionTest2()// FailurenewActionTest2('test')// FailurenewActionTest2(5,'test')// Failure
import{ActionStandard}from'flux-action-class'classActionTest3extendsActionStandard<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 constructornewActionTest3(5,'test')// CorrectnewActionTest3()// FailurenewActionTest3('test')// FailurenewActionTest3(5,45)// Failure
import{ActionStandard}from'flux-action-class'classActionTest4extendsActionStandard<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 constructornewActionTest4(undefined,'test')// CorrectnewActionTest4()// FailurenewActionTest4('test')// FailurenewActionTest4(5,45)// Failure
import{ActionStandard}from'flux-action-class'classActionTest5extendsActionStandard<Error>{}// Creates action with error payload, no meta, type 'flux-action-class:ActionTest5' and error = true// TS compiler expects one argument provided to the constructornewActionTest5(newError())// CorrectnewActionTest3()// FailurenewActionTest3('test')// FailurenewActionTest3(5,45)// Failure
import{ActionStandard}from'flux-action-class'classActionTest6extendsActionStandard<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 constructornewActionTest6(newError(),'string')// CorrectnewActionTest6()// FailurenewActionTest6('test')// FailurenewActionTest6(5,45)// Failure
import{ActionStandard}from'flux-action-class'abstractclassAppBaseAction<Payload=undefined,Meta=undefined>extendsActionStandard<Payload,Meta>{protectedstaticreadonlyprefix='app:'}classActionTest7extendsAppBaseAction{}// Creates action with no payload, no meta, type 'app:ActionTest7' and error = false
import{ActionStandard,setPrefix}from'flux-action-class'// Add it only once and it changes default prefix for all actionssetPrefix('app:')classActionTest7extendsActionStandard{}// Creates action with no payload, no meta, type 'app:ActionTest7' and error = false
Be aware, if you're usingswitch-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 fieldtype.
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 usingngrx-actions instead.
You can take a look at the discussionhere
flux-action-class relies on class names andTerser (Uglify) by default doesn't preserve class names during minification. Here's what you can do to change that.
Addkeep_classnames: true (keep_fnames: true for ES5 targets) toterserOptions.
module.exports={optimization:{minimizer:[newTerserPlugin({terserOptions:{// add this linekeep_classnames:true,},}),],},}
CRA doesn't expose Terser config by default (please, upvotethis issue to change it!). Rour options are:
- Usecustomize-cra
- Do an
eject - Fork react-scripts (readthis 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, upvotethis issue to change it!). You could use thiscustom builder, which is just a subclass of their default builder with Terser-tuning added.
About
Boilerplate free class-based action creator. Following flux-standard-action spec. Built with TypeScript. Works with redux and ngrx.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.