TS Redux Actions
Typesafe Redux Action Creators for TypeScript
This lib is a part of react-redux-typescript
library, which is a collection of valuable utilities commonly used across many TypeScript Projects.
- Thoroughly tested both logic and type correctness
- No third-party dependencies
- Semantic Versioning
- Output separate bundles for your specific workflow needs:
- ES5 + CommonJS -
main
- ES5 + ES-Modules -
module
- ES2015 + CommonJS -
jsnext:main
- ES5 + CommonJS -
Table of Contents (v1.0)
Installation
For NPM users
$ npm install --save ts-redux-actions
For Yarn users
$ yarn add ts-redux-actions
Motivation
I wasn't satisfied with redux-actions with TypeScript because of separate payload & meta map functions which makes it not idiomatic when using with static typing.
What I mean here is it will break your function definition type inference and intellisense in returned "action creator" function (e.g. named arguments will be renamed to generic names like a1, a2, etc... and function arity with optional parameters will break your function signature entirely).
It will force you to do an extra effort for explicit type annotations and probably result in more boilerplate when trying to work around it.
Get Started
Important note: Every function created by
createAction
has a convenientgetType
method for a reducer switch case scenarios like below to reduce common boilerplate (works to narrow "Discriminated Union" types, remember to add trailing!
to remove optional undefined type):
; ;// const increment: (() => { type: "INCREMENT"; }) & { getType?(): "INCREMENT"; } << HERE switch action.type { // getter on every action creator function: case increment.getType!
To highlight the difference in API design and the benefits of "action creator" type inference found in this solution let me show you some usage examples:
- no payload
// with redux-actions// notice excess nullable properties "payload" and "error", "type" property widened to string// const notify1: () => {// type: string;// payload: void | undefined;// error: boolean | undefined;// } // with ts-redux-actions// only what is expected, no nullables, with inferred literal type in type property!// const notify1: () => {// type: "NOTIFY";// }
- with payload
// with redux-actions// notice missing optional "message" argument, arg name changed to "t1", "type" property widened to string, and excess nullable properties// const notify2: (t1: string) => {// type: string;// payload: { message: string; } | undefined;// error: boolean | undefined;// } // with ts-redux-actions// still all good!// const notify2: (username: string, message?: string | undefined) => {// type: "NOTIFY";// payload: { message: string; };// }
- with payload and meta
// with redux-actions// notice missing arguments arity and types, "type" property widened to string// const notify2: (...args: any[]) => {// type: string;// payload: { message: string; } | undefined;// meta: { username: string; message: string | undefined; };// error: boolean | undefined;// } // with ts-redux-actions // inference working as expected and compiler will catch all those nasty bugs:// const: notify: (username: string, message?: string | undefined) => {// type: "NOTIFY";// payload: { message: string; };// meta: { username: string; message: string | undefined; };// }
API
For more advanced usage scenarios please check use cases described in test specifications
getType
get type literal from action creator
// AC<T> extends (...args: any[]) => { type: T }
Examples:
;;expecttype.toBe'INCREMENT'; // in reducerswitch action.type { case getTypeincrement: return state + 1; default: return state;}
createAction
creates action creator function with type helper
Examples:
it'no payload',; it'with payload',; it'with payload and meta',;
createActions
(WIP)
MIT License
Copyright (c) 2017 Piotr Witek piotrek.witek@gmail.com (http://piotrwitek.github.io)