redux-ease - npm Package Compare versions

Comparing version 0.5.3 to 0.6.0

dist/ActionCreatorBuilder.d.ts

@@ -1,2 +0,2 @@
-import { TExportedActionCreator, TOptionalPayloadAction, TDynamicExportedActionCreator } from "../types/types";
+import { TExportedActionCreator, TDynamicExportedActionCreator, TActionPayloadCreator } from "../types/types";
 import { IActionCreatorBuilder } from "../types/IActionCreatorBuilder";
@@ -10,4 +10,6 @@ export declare class ActionCreatorBuilder implements IActionCreatorBuilder {
     }>(actionTypeCodes: T[]): U;
-    build<A, P>(actionTypeCode: string, creator?: (...args: A[]) => P): TExportedActionCreator<A, P>;
-    buildDynamic<A, P = any>(creator: (...args: A[]) => TOptionalPayloadAction<P>): TDynamicExportedActionCreator<A, P>;
+    build<A, P>(actionTypeCode: string, creator?: TActionPayloadCreator<A, P>): TExportedActionCreator<A, P>;
+    extend<A, P>(action: TExportedActionCreator<any, P>, creator: TActionPayloadCreator<A, P>): TExportedActionCreator<A, P>;
+    buildDynamic<A, P = any>(creator: TDynamicExportedActionCreator<A, P>): TDynamicExportedActionCreator<A, P>;
+    private getExportedActionCreator;
 }

dist/ActionCreatorBuilder.js

@@ -19,3 +19,13 @@ "use strict";
         const typeCode = this.getConst(actionTypeCode);
-        function actionCreator(...args) {
+        return this.getExportedActionCreator(typeCode, creator);
+    }
+    extend(action, creator) {
+        const typeCode = action.typeCode;
+        return this.getExportedActionCreator(typeCode, creator);
+    }
+    buildDynamic(creator) {
+        return creator;
+    }
+    getExportedActionCreator(typeCode, creator) {
+        const actionCreator = function (...args) {
             return {
@@ -25,10 +35,7 @@ type: typeCode,
             };
-        }
+        };
         actionCreator.typeCode = typeCode;
         return actionCreator;
     }
-    buildDynamic(creator) {
-        return creator;
-    }
 }
 exports.ActionCreatorBuilder = ActionCreatorBuilder;

example.ts

@@ -16,3 +16,3 @@ import { getActionCreator, getReducerBuilder } from "./src/getters";
 
-export const increace = actionBuilder.build('INCREACE', (amount: number = 1) => ({ amount }))
+export const increase = actionBuilder.build('INCREASE', (amount: number = 1) => ({ amount }))
 
@@ -30,3 +30,3 @@ export const decrease: TDynamicExportedActionCreator<number, { amount: number }> = actionBuilder.buildDynamic((amount: number = 1) => ({
   .copyState()
-  .handle(increace, (s, a) => ({ counter: s.counter + a.payload.amount }))
+  .handle(increase, (s, a) => ({ counter: s.counter + a.payload.amount }))
   .handleType<{ amount: number }>( // Unnecessary to specify type 
@@ -33,0 +33,0 @@ actions.DECREACE, (s, a) => ({

package.json

 {
   "name": "redux-ease",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Reduce Redux boilerplate with ease",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -5,2 +5,4 @@ # Redux Ease 👌
 
+Works great with both JavaScript and TypeScript.
+
 ## Installation
@@ -47,3 +49,3 @@
 
-export const counterIncreace = actionBuilder.build('INCREACE', (amount: number = 1) => ({ amount }))
+export const counterIncrease = actionBuilder.build('INCREASE', (amount = 1) => ({ amount }))
 
@@ -62,4 +64,4 @@ export const counterToZero = actionBuilder.build('TO_ZERO')
   .copyState()
-  // TypeScript knows: action's payload has `amount` property with `number` type:
-  .handle(counterIncreace, (s, a) => ({ value: s.value + a.payload.amount }))
+  // Type hinting knows that action's payload has `amount` property:
+  .handle(counterIncrease, (s, a) => ({ value: s.value + a.payload.amount }))
   .hanlde(counterToZero, () => ({ value: 0 })
@@ -69,6 +71,18 @@ .build()
 
-Thats it! 8 lines and we're done. Also, if you're using TypeScript as I do, you can see nice type hints for action payload content.
+Thats it! 8 lines and we're done. If you're using IDE which supports TypeScript-based type hinting (WebStorm or VS Code, for example), you can see nice type hints for action payload content.
 
-## Alternative option: With action constants
+#### Extending action creators
 
+If you need to add new logic to existent action creator or change it's arguments list, you can use the `extend` method of action creator builder. Note that payload of extended action creator should be compatible with parent's payload (type hinting will notify you about this). 
+
+```js
+// counter-actions.ts
+
+export const counterDoubleIncrease = actionBuilder.extend(counterIncrease, (amount: number = 1) => ({ amount: amount * 2 }))
+```
+
+The extended action creater will receive the same type as parent, so you don't need to make any changes in reducer: if parent action creator is handled in reducer, then all it's chidlrens will be handled too.
+
+### Alternative option: With action constants
+
 If you want to define actions constants, Redux Ease also can help you to simplify this task:
@@ -79,4 +93,4 @@
 
-// TypeScript knows: `counterActions` has `INCREASE` and `TO_ZERO` properties.
-export const counterActions = actionBuilder.getConstants(['INCREACE', 'TO_ZERO'])
+// Type hinting knows that `counterActions` has `INCREASE` and `TO_ZERO` properties.
+export const counterActions = actionBuilder.getConstants(['INCREASE', 'TO_ZERO'])
 
@@ -91,3 +105,3 @@ /*
 
-Alternatively, if you prefer to manualy create actions, you can do this:
+Alternatively, if you prefer to create actions manualy you can do this:
 
@@ -97,3 +111,3 @@ ```js
 
-export const INCREACE = actionBuilder.getConst('INCREACE') // equals 'COUNTER_INCREACE'
+export const INCREASE = actionBuilder.getConst('INCREASE') // equals 'COUNTER_INCREASE'
 ```
@@ -108,3 +122,3 @@
   .copyState()
-  .handle(counterActions.INCREACE, (s, a) => ({ value: s.value + a.payload.amount }))
+  .handle(counterActions.INCREASE, (s, a) => ({ value: s.value + a.payload.amount }))
   .hanlde(counterActions.TO_ZERO, () => ({ value: 0 })
@@ -114,10 +128,7 @@ .build()
 
-Unfortunately, TypeScript doesn't know action's payload type, but we can specify it manyally:
+Unfortunately, type hinting doesn't know action's payload type in this case. However, if you're usng TypeScript, you can specify it manyally:
 
 ```js
-// counter-reducer.ts
-
-// ...
-  .handle<{ amount: number }>(counterActions.INCREACE, (s, a) => ({ value: s.value + a.payload.amount }))
-// ...
+  // Note that instead of writing payload typings here you can write them in separate .d.ts file. 
+  .handle<{ amount: number }>(counterActions.INCREASE, (s, a) => ({ value: s.value + a.payload.amount }))
 ```
@@ -140,3 +151,3 @@
   .copyState()
-  .handle(counterIncreace, (s, a) => s.set('value', s.value + a.payload.amount))
+  .handle(counterIncrease, (s, a) => s.set('value', s.value + a.payload.amount))
   .hanlde(counterToZero, () => s.set('value', 0)
@@ -143,0 +154,0 @@ .build()

src/ActionCreatorBuilder.ts

@@ -1,2 +0,2 @@
-import { TExportedActionCreator, TOptionalPayloadAction, TDynamicExportedActionCreator } from "../types/types";
+import { TExportedActionCreator, TOptionalPayloadAction, TDynamicExportedActionCreator, TActionPayloadCreator } from "../types/types";
 import { IActionCreatorBuilder } from "../types/IActionCreatorBuilder";
@@ -24,6 +24,20 @@
   
-  build <A, P> (actionTypeCode: string, creator?: (...args: A[]) => P): TExportedActionCreator<A, P> {
+  build <A, P> (actionTypeCode: string, creator?: TActionPayloadCreator<A, P>): TExportedActionCreator<A, P> {
     const typeCode = this.getConst(actionTypeCode)
+    return this.getExportedActionCreator(typeCode, creator)
+  }
+
+  extend <A, P> (action: TExportedActionCreator<any, P>, creator: TActionPayloadCreator<A, P>): TExportedActionCreator<A, P> {
+    const typeCode = action.typeCode
+    return this.getExportedActionCreator(typeCode, creator)
+  }
   
-    function actionCreator (...args: A[]) {
+  buildDynamic <A, P = any> (creator: TDynamicExportedActionCreator<A, P>): TDynamicExportedActionCreator<A, P> {
+    return creator
+  }
+
+  private getExportedActionCreator <A, P> (
+    typeCode: string, creator?: TActionPayloadCreator<A, P>
+  ): TExportedActionCreator<A, P> {
+    const actionCreator = function (...args: A[]) {
       return {
@@ -39,6 +53,2 @@ type: typeCode,
   }
-  
-  buildDynamic <A, P = any> (creator: (...args: A[]) => TOptionalPayloadAction<P>): TDynamicExportedActionCreator<A, P> {
-    return creator
-  }
 }

test/no-constants.spec.ts

@@ -22,2 +22,24 @@ import { getActionCreator, getReducerBuilder } from '../src'
   })
+
+  it('should extend action', () => {
+    const actionBuilder = getActionCreator('TEST')
+    
+    const initialState = {
+      value: 1,
+    }
+
+    const multiply = actionBuilder.build('MULTIPLY', (multiplier: number = 2) => ({ multiplier }))
+    const doubleMultiply = actionBuilder.extend(multiply, (multiplier: number = 2) => ({ multiplier: multiplier * 2 }))
+
+    expect(doubleMultiply(4).payload.multiplier).toEqual(8)
+    expect(doubleMultiply().type).toEqual('TEST_MULTIPLY')
+
+    const reducer = getReducerBuilder(initialState).copyState()
+      .handle(multiply, (s, a) => ({ value: s.value * a.payload.multiplier }))
+      .build()
+
+      
+    expect(reducer(undefined, multiply(5)).value).toEqual(5)
+    expect(reducer(undefined, doubleMultiply(5)).value).toEqual(10)
+  })
 })

tsconfig.json

 {
   "compilerOptions": {
-    "target": "es2016",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    "outDir": "./dist",                        /* Redirect output structure to the directory. */
-    "strict": true,                           /* Enable all strict type-checking options. */
-    "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    "allowJs": true
+    "target": "es2015",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true
   },
   "include": [ "src", "types" ]
 }

types/IActionCreatorBuilder.d.ts

@@ -1,2 +0,2 @@
-import { TOptionalPayloadAction, TDynamicExportedActionCreator, TExportedActionCreator } from "./types";
+import { TOptionalPayloadAction, TDynamicExportedActionCreator, TExportedActionCreator, TActionPayloadCreator } from "./types";
 
@@ -10,3 +10,5 @@ export interface IActionCreatorBuilder {
 
+  extend <A, P> (action: TExportedActionCreator<any, P>, creator: TActionPayloadCreator<A, P>): TExportedActionCreator<A, P>
+
   buildDynamic <A, P = any> (creator: (...args: A[]) => TOptionalPayloadAction<P>): TDynamicExportedActionCreator<A, P>
 }

types/types.d.ts

@@ -6,2 +6,6 @@ export interface TActionCreator <A = any, P = any> {
 
+export interface TActionPayloadCreator <A, P> {
+  (...args: A[]): P
+}
+
 export interface TGetActionCreator <A = any[], P = any> {
@@ -8,0 +12,0 @@ (reducerCode?: string, joinSymbol?: string): TActionCreator<A, P>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

171593

increased by0.83%

Lines of code

390

increased by5.41%

Number of lines in readme file

157

increased by7.53%

Worsened metrics

Number of package files

23

decreased by-4.17%

No dependency changes