rainbow-actions
Advanced tools
+10
-0
@@ -71,1 +71,11 @@ type PayloadDict = Record<string, unknown>; | ||
| }; | ||
| type AbstractActionNamespace = Record<string, (...args: any) => {type: string}>; | ||
| export type ExtractNamespaceActions<T extends AbstractActionNamespace> = { | ||
| [K in keyof T]: ReturnType<T[K]> | ||
| }[keyof T]; | ||
| export type ExtractManyNamespaceActions<T extends AbstractActionNamespace[]> = { | ||
| [K in keyof T]: T[K] extends AbstractActionNamespace ? ExtractNamespaceActions<T[K]> : never | ||
| }[number]; |
+1
-1
| { | ||
| "name": "rainbow-actions", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "Type safe and namespaced redux actions", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
+38
-12
| # Rainbow actions 🌈 | ||
| This is **not** a project to reduce redux boilerplate. The project goal is to gather actions and action creators for the same domain in namespaces by their domain purpose. | ||
| This is **not** a project to reduce redux boilerplate. The project goal is to gather the same domain actions and action creators in namespaces by their domain purpose. | ||
@@ -42,7 +42,33 @@ ## Install | ||
| Typescript raises an error when one attempts to access a property on `requestPost` any other than the keys of `PayloadDictionary`. | ||
| Typescript raises an error when one attempts to access a property of `requestPost` any other than the keys of `PayloadDictionary`. | ||
| ## Extract action types | ||
| ```typescript | ||
| import {createActions, ExtractNamespaceActions, ExtractManyNamespaceActions} from 'rainbow-actions' | ||
| type RequestPayloads = { | ||
| init: number; | ||
| get: string; | ||
| end: never; | ||
| } | ||
| const request = createActions<RequestPayloads>()('request') | ||
| /** | ||
| * To extract action types from a single namespace you can use `ExtractNamespaceActions` | ||
| */ | ||
| type Actions = ExtractNamespaceActions<typeof request> | ||
| Actions // {type: 'request_init'; payload: number} | {type: 'request_get'; payload: string} | {type: 'request_end'} | ||
| /** | ||
| * To extract action types from multiple namespaces you can use `ExtractManyNamespaceActions` | ||
| */ | ||
| type AllActions = ExtractManyNamespaceActions<[typeof request, typeof anotherNamespace /*...etc*/]> | ||
| ``` | ||
| ## Advanced usage | ||
| Note the object passed to the function after the action type base. | ||
| Note the object passed to the function after the action type base: | ||
@@ -59,5 +85,5 @@ ```typescript | ||
| /** | ||
| * You can see that using the optinal action dictionary argument you can define: | ||
| * You can see that using the optional action dictionary argument you can define: | ||
| * * payload - a function to generate/modify payload | ||
| * * meta - a function to generate/modify payload | ||
| * * meta - a function to generate/modify meta information | ||
| * * error - a flag for error actions | ||
@@ -68,7 +94,7 @@ * | ||
| const base = createActions<PayloadDictionary>()('base', { | ||
| one: {payload: (id) => id * 2}}), | ||
| one: {payload: (id) => id * 2}, | ||
| // ^^ the type inferred as number since we defined it in PayloadDictionary | ||
| two: {meta: (flag) => `flag is ${flag}`}}), | ||
| two: {meta: (flag) => `flag is ${flag}`}, | ||
| three: {error: true}, | ||
| ) | ||
| }) | ||
@@ -96,7 +122,7 @@ /** | ||
| Both basic and advanced usage work using the Proxy object. This means if you are not 100% confident about your types than developers may accidentally dispatch incorrect actions since any method on the created action namespace will be a valid action creator. If this sounds scary, worry no more, this package also provides a safe version. | ||
| Both basic and advanced usage work using the Proxy object. This means if you are not 100% confident about your types, then developers may accidentally dispatch incorrect actions since any method on the created action namespace will be a valid action creator. If this sounds scary, worry no more, this package also provides a safe version. | ||
| ## Safe usage | ||
| If you prefer to avoid the Proxy usage or are not 100% confident in the typescript types in your project you can use the safe version. It requires to pass all of the actions for the namespace to be accessible. | ||
| If you prefer to avoid the Proxy usage or are not 100% confident in the typescript types in your project, you can use the safe version. It requires to pass all of the actions for the namespace to be accessible. | ||
@@ -117,4 +143,4 @@ ```typescript | ||
| // ^ if no creators are necessary, 0 can be a placeholer | ||
| one: {payload: (id) => id * 2}}), | ||
| two: {meta: (flag) => `flag is ${flag}`}}), | ||
| one: {payload: (id) => id * 2}, | ||
| two: {meta: (flag) => `flag is ${flag}`}, | ||
| three: {error: true}, | ||
@@ -121,0 +147,0 @@ }) |
14247
8.81%231
3.13%168
18.31%