Typesafe Redux action creation utility
npm install @artossystems/aA zero-dependency, boilerplate-reducing utility for easily creating typesafe
Redux actions in TypeScript.
``sh`
yarn add @artossystems/aor
npm install @artossystems/a
`ts
/**
* Actions
*/
import a from '@artossystems/a'
// Simple action without payload
const ASimpleAction = a('SIMPLE/ACTION')
type ASimpleAction = ReturnType
/**
* Produces:
* {
* type: "SIMPLE/ACTION",
* }
*/
// Action with payload
const APayloadAction = a('PAYLOAD/ACTION', {} as { str: string })
type APayloadAction = ReturnType
/**
* Produces:
* {
* type: "PAYLOAD/ACTION",
* str: "a string",
* }
*/
export { ASimpleAction, APayloadAction }
`
`ts
/**
* Reducer
*/
export const reducer: Reducer
state = { stringInState: 'idle' },
action,
) => {
switch (action.type) {
case ASimpleAction.TYPE:
return {
...state,
stringInState: 'updated string',
}
case APayloadAction.TYPE:
return {
...state,
stringInState: action.str,
}
default:
return state
}
}
`
`ts
/**
* Map Dispatch To Props
*/
const mapDispatchToProps = (dispatch: Dispatch): IDispatchProps => ({
onSimpleClick: () => dispatch(ASimpleAction()),
onPayloadClick: (str: string) => dispatch(APayloadAction({ str })),
})
`
The aim of this project is to reduce boilerplate but also aid readability of
action files. Ideally, the action and types will fit on one line each. However,
Prettier's 80 character line-length limit may make this difficult. One way to
give yourself more characters, is to export all the actions at the end of the
file:
`ts
const ASimpleAction = a('SIMPLE/ACTION')
type ASimpleAction = ReturnType
const APayloadAction = a('PAYLOAD/ACTION', {} as { str: string })
type APayloadAction = ReturnType
export { ASimpleAction, APayloadAction }
`
If you have many actions in a file, separating the action construction and the
TS type declarations aids readability. You will soon realise if you've forgotten
the TS type when you come to use it in reducers, tests etc.
`ts
const ASimpleAction = a('SIMPLE/ACTION')
const APayloadAction = a('PAYLOAD/ACTION', {} as { str: string })
const AOtherPayloadAction = a('PAYLOAD/OTHER_ACTION', {} as { num: number })
type ASimpleAction = ReturnType
type APayloadAction = ReturnType
type AOtherPayloadAction = ReturnType
export { ASimpleAction, APayloadAction, AOtherPayloadAction }
`
Depending on your tslint config, the payload object can either be written as
`ts`
{} as { str: string }
or
`ts`
<{ str: string }>{}
Clone repo and install dependencies using NPM:
`sh`
npm i
Source for a can be found in src/a.ts.
Run the demo redux app using:
`sh`
npm start
MIT. See the LICENSE file for more information.
Remember to update the CHANGELOG and bump the version number
using npm version patch, npm version minor, or npm version major. Publishnpm publish --access public`.
to registry using
This project was inspired by Nicholas Jamieson's
ts-action package. Many thanks to him
and for his swift answers to questions.
Also thanks to the person who wrote
this post, you set
us on a path to understanding more about Typescript.