app-redux-utils - npm Package Compare versions

Comparing version 1.3.5 to 1.4.0

dist/controller/controllerMiddleware.d.ts

 import { Store } from 'redux';
+import { Container } from 'cheap-di';
 import { Action } from '../types';
 import { Watcher } from './Watcher';
-declare function controllerMiddleware<TState>(watchers: Watcher<TState, any>[]): (reduxStore: Store<TState, Action>) => (next: (action: Action) => void) => (action: Action) => Promise<void>;
+declare function controllerMiddleware<State>(watchers: Watcher<State, any>[], container?: Container): (reduxStore: Store<State, Action>) => (next: (action: Action) => void) => (action: Action) => Promise<void>;
 export { controllerMiddleware };

dist/controller/controllerMiddleware.js

@@ -6,9 +6,23 @@ "use strict";
 const types_1 = require("../types");
-function controllerMiddleware(watchers) {
-    return (reduxStore) => (next) => (action) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+function controllerMiddleware(watchers, container) {
+    return (reduxStore) => (next) => (action) => (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
         next(action);
-        if (!types_1.isAction(action)) {
+        let createController;
+        if (container) {
+            container.registerInstance(reduxStore).as(types_1.AbstractStore);
+            createController = (watcher) => {
+                const internalDependencies = container.dependencies;
+                if (internalDependencies && !internalDependencies.has(watcher.type)) {
+                    container.registerType(watcher.type);
+                }
+                return container.resolve(watcher.type);
+            };
+        }
+        else {
+            createController = (watcher) => watcher.instance(reduxStore);
+        }
+        if (!(0, types_1.isAction)(action)) {
             return;
         }
-        const generator = controllerGenerator(watchers, reduxStore, action);
+        const generator = controllerGenerator(watchers, createController, action);
         let iterator;
@@ -29,3 +43,3 @@ do {
 exports.controllerMiddleware = controllerMiddleware;
-function controllerGenerator(watchers, reduxStore, initAction) {
+function controllerGenerator(watchers, createController, initAction) {
     let actionCursor = 0;
@@ -45,3 +59,3 @@ const actions = [() => initAction];
             if (actionName) {
-                const controller = watcher.instance(reduxStore);
+                const controller = createController(watcher);
                 promises.push(controller[actionName](action));
@@ -53,3 +67,3 @@ }
             value: Promise.all(promises).then(() => {
-                if (types_1.isAction(action) && !action.stopPropagation) {
+                if ((0, types_1.isAction)(action) && !action.stopPropagation) {
                     actions.splice(actionCursor, 0, ...action.getActions());
@@ -56,0 +70,0 @@ }

dist/controller/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./ControllerBase"), exports);
-tslib_1.__exportStar(require("./Controller"), exports);
-tslib_1.__exportStar(require("./controllerMiddleware"), exports);
-tslib_1.__exportStar(require("./Watcher"), exports);
+(0, tslib_1.__exportStar)(require("./ControllerBase"), exports);
+(0, tslib_1.__exportStar)(require("./Controller"), exports);
+(0, tslib_1.__exportStar)(require("./controllerMiddleware"), exports);
+(0, tslib_1.__exportStar)(require("./Watcher"), exports);
 //# sourceMappingURL=index.js.map

dist/controller/Watcher.d.ts

@@ -9,2 +9,3 @@ import { Store } from 'redux';
     instance: (reduxStore: Store<TState, Action>) => ControllerBase<TState>;
+    type: new (reduxStore: Store<TState, Action>) => ControllerBase<TState>;
 };
@@ -11,0 +12,0 @@ declare function watcher<TState, TController extends Controller>(Controller: new (reduxStore: Store<TState, Action>) => ControllerBase<TState>, watchList: [string, keyof TController][]): Watcher<TState, TController>;

dist/controller/Watcher.js

@@ -10,2 +10,3 @@ "use strict";
         instance: (reduxStore) => new Controller(reduxStore),
+        type: Controller,
     };
@@ -12,0 +13,0 @@ }

dist/createActionWithCallback.js

@@ -6,3 +6,3 @@ "use strict";
 function createActionWithCallback(actionType, payload = {}) {
-    const appAction = createAction_1.createAction(actionType, payload);
+    const appAction = (0, createAction_1.createAction)(actionType, payload);
     const actionWithCallback = (callbackAction) => {
@@ -9,0 +9,0 @@ if (typeof callbackAction === 'function') {

dist/createReducers.js

@@ -7,5 +7,5 @@ "use strict";
     const reducers = getReducers(...params);
-    return redux_1.combineReducers(reducers);
+    return (0, redux_1.combineReducers)(reducers);
 }
 exports.createReducers = createReducers;
 //# sourceMappingURL=createReducers.js.map

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./controller"), exports);
-tslib_1.__exportStar(require("./createAction"), exports);
-tslib_1.__exportStar(require("./createActionWithCallback"), exports);
-tslib_1.__exportStar(require("./createReducers"), exports);
-tslib_1.__exportStar(require("./types"), exports);
+(0, tslib_1.__exportStar)(require("./controller"), exports);
+(0, tslib_1.__exportStar)(require("./createAction"), exports);
+(0, tslib_1.__exportStar)(require("./createActionWithCallback"), exports);
+(0, tslib_1.__exportStar)(require("./createReducers"), exports);
+(0, tslib_1.__exportStar)(require("./types"), exports);
 //# sourceMappingURL=index.js.map

dist/types/index.d.ts

@@ -0,1 +1,2 @@
+export * from './AbstractStore';
 export * from './ActionWithCallback';
@@ -2,0 +3,0 @@ export * from './Action';

dist/types/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./ActionWithCallback"), exports);
-tslib_1.__exportStar(require("./Action"), exports);
-tslib_1.__exportStar(require("./CallbackAction"), exports);
-tslib_1.__exportStar(require("./isAction"), exports);
-tslib_1.__exportStar(require("./Reducer"), exports);
+(0, tslib_1.__exportStar)(require("./AbstractStore"), exports);
+(0, tslib_1.__exportStar)(require("./ActionWithCallback"), exports);
+(0, tslib_1.__exportStar)(require("./Action"), exports);
+(0, tslib_1.__exportStar)(require("./CallbackAction"), exports);
+(0, tslib_1.__exportStar)(require("./isAction"), exports);
+(0, tslib_1.__exportStar)(require("./Reducer"), exports);
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "app-redux-utils",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "Helpful utils for redux",
@@ -27,13 +27,14 @@ "contributors": [
   "dependencies": {
-    "redux": "4.1.0"
+    "redux": "4.1.1"
   },
   "devDependencies": {
-    "@types/jest": "26.0.23",
-    "@typescript-eslint/eslint-plugin": "4.25.0",
-    "@typescript-eslint/parser": "4.25.0",
-    "eslint": "7.27.0",
-    "eslint-plugin-sonarjs": "0.7.0",
-    "jest": "26.6.3",
-    "ts-jest": "26.5.6",
-    "typescript": "4.2.4"
+    "@types/jest": "27.0.1",
+    "@typescript-eslint/eslint-plugin": "4.31.1",
+    "@typescript-eslint/parser": "4.31.1",
+    "cheap-di": "3.2.1",
+    "eslint": "7.32.0",
+    "eslint-plugin-sonarjs": "0.10.0",
+    "jest": "27.2.0",
+    "ts-jest": "27.0.5",
+    "typescript": "4.4.3"
   },
@@ -40,0 +41,0 @@ "repository": {

README.md

 * [install](#Installation)
 * [usage](#How to use)
 * [controllers](#Using controllers)
+* [controllers-di](#Using controllers with cheap-di)
 * [redux-saga](#Using with redux-saga)
@@ -35,24 +36,17 @@
 export class UsersActions {
-  public static readonly PREFIX = "USERS_";
-  public static readonly UPDATE_STORE = UsersActions.PREFIX + "UPDATE_STORE";
+  static readonly PREFIX = "USERS_";
+  static readonly UPDATE_STORE = `${UsersActions.PREFIX}UPDATE_STORE`;
 
-  public static readonly LOAD_USERS = UsersActions.PREFIX + "LOAD_USERS";
-  public static readonly LOAD_USER = UsersActions.PREFIX + "LOAD_USER";
-  public static readonly LOAD_CURRENT_USER = UsersActions.PREFIX + "LOAD_CURRENT_USER";
-  public static readonly LOAD_SOMETHING_ELSE = UsersActions.PREFIX + "LOAD_SOMETHING_ELSE";
+  static readonly LOAD_USER_LIST = `${UsersActions.PREFIX}LOAD_USER_LIST`;
+  static readonly LOAD_USER = `${UsersActions.PREFIX}LOAD_USER`;
+  static readonly LOAD_CURRENT_USER = `${UsersActions.PREFIX}LOAD_CURRENT_USER`;
+  static readonly LOAD_SOMETHING_ELSE = `${UsersActions.PREFIX}LOAD_SOMETHING_ELSE`;
 
-  public static updateStore = (partialStore: Partial<UsersStore>) =>
+  static updateStore = (partialStore: Partial<UsersStore>) =>
     createAction(UsersActions.UPDATE_STORE, partialStore);
 
-  public static loadUsers = () =>
-    createAction(UsersActions.LOAD_USERS);
-
-  public static loadUser = (data: LoadUserData) =>
-    createAction(UsersActions.LOAD_USER, data);
-
-  public static loadCurrentUser = () =>
-    createActionWithCallback(UsersActions.LOAD_CURRENT_USER);
-
-  public static loadSomethingElse = () =>
-    createAction(UsersActions.LOAD_SOMETHING_ELSE);
+  static loadUserList = () => createAction(UsersActions.LOAD_USER_LIST);
+  static loadUser = (data: LoadUserData) => createAction(UsersActions.LOAD_USER, data);
+  static loadCurrentUser = () => createActionWithCallback(UsersActions.LOAD_CURRENT_USER);
+  static loadSomethingElse = () => createAction(UsersActions.LOAD_SOMETHING_ELSE);
 }
@@ -68,15 +62,14 @@ ```
 import { UsersActions } from "./Users.actions";
-import { IUsersPageCallProps, UsersPage } from "./UsersPage";
+import { Props, UsersPage } from "./UsersPage";
 
-const mapDispatchToProps = (dispatch: Dispatch): IUsersPageCallProps => {
-  return {
-    loadUsers: () => dispatch(UsersActions.loadUsers()),
-    loadUser: (userId: number) => dispatch(UsersActions.loadUser({ userId })),
-    loadCurrentUser: () => dispatch(
-      UsersActions.loadCurrentUser()(
-        () => UsersActions.loadSomethingElse()
-      )
-    ),
-  };
-};
+const mapDispatchToProps = (dispatch: Dispatch): Props => ({
+  loadUserList: () => dispatch(UsersActions.loadUserList()),
+  loadUser: (userId: number) => dispatch(UsersActions.loadUser({ userId })),
+  loadCurrentUser: () => dispatch(
+    UsersActions.loadCurrentUser()(
+      // this action will be dispatched after loadCurrentUser will be handled in controller
+      () => UsersActions.loadSomethingElse()
+    )
+  ),
+});
 
@@ -136,3 +129,5 @@ const UsersPageContainer: ComponentType = connect(
 export function configureApp(): Store<State> {
-  const composeEnhancer = window["__REDUX_DEVTOOLS_EXTENSION_COMPOSE__"] || compose;
+  const devtoolsComposer = window["__REDUX_DEVTOOLS_EXTENSION_COMPOSE__"];
+  const composeEnhancer = devtoolsComposer || compose;
+
   const store: Store<State> = createStore(
@@ -149,2 +144,6 @@ createReducers(getReducers),
 
+Controller - is place for piece of logic in your application. 
+It differences from Saga in redux-saga - your methods is not static! 
+It allows you to use dependency injection technics and simplify tests in some cases. 
+
 ```ts
@@ -162,3 +161,3 @@ // User.controller.ts
 
-  async loadUsers() {
+  async loadUserList() {
     this.updateStore({
@@ -174,3 +173,3 @@ usersAreLoading: true,
 
-      // show error notification or something elase
+      // show error notification or something else
       return;
@@ -186,4 +185,7 @@ }
   }
+  
+  loadUser(action: Action<LoadUserData>) {/* ... */}
+  loadCurrentUser() {/* ... */}
+  loadSomethingElse() {/* ... */}
 }
-
 ```
@@ -202,5 +204,10 @@
     [
-      UserActions.LOAD_USERS,
-      'loadUsers',
+      UserActions.LOAD_USER_LIST,
+      'loadUserList', // typescript will check that this string corresponds to real method name in your controller
     ],
+    [
+      UserActions.LOAD_USER,
+      'loadUser',
+    ],
+    //...
   ]);
@@ -225,14 +232,12 @@ ```
 // configureApp.ts
-import { createReducers, controllerMiddleware } from "app-redux-utils";
-import { applyMiddleware, compose, createStore, Store } from "redux";
-
+import { controllerMiddleware } from "app-redux-utils";
+import { createStore, /* ... */ } from "redux";
 import { controllerWatchers } from "./controllerWatchers";
-import { State } from "./State";
-import { getReducers } from "./getReducers";
+// ...
 
 export function configureApp(): Store<State> {
-  const composeEnhancer = window["__REDUX_DEVTOOLS_EXTENSION_COMPOSE__"] || compose;
+  // ...
+
   const store: Store<State> = createStore(
-    createReducers(getReducers),
-    composeEnhancer(applyMiddleware()),
+    // ...
     controllerMiddleware(controllerWatchers) // here we connect middleware
@@ -245,37 +250,70 @@ );
 
-### <a name="redux-saga"></a> Using with redux-saga
+### <a name="controller-di"></a> Using controllers with cheap-di
 
 ```ts
-// Users.saga.ts
-import { put } from "@redux-saga/core/effects";
-import { Action } from "app-redux-utils";
+// configureApp.ts
+import { controllerMiddleware } from "app-redux-utils";
+import { container } from 'cheap-di';
+import { createStore, /* ... */ } from "redux";
+import { controllerWatchers } from "./controllerWatchers";
+// ...
 
-import { UsersApi } from "@api/UsersApi";
-import { UsersActions, ILoadUserData } from "../redux/Users.actions";
-import { UsersStore } from "../redux/Users.store";
+export function configureApp(): Store<State> {
+  // ...
 
-export class UsersSaga {
-  private static* updateStore(partialStore: Partial<UsersStore>) {
-    yield put(UsersActions.updateStore(partialStore));
-  }
+  const store: Store<State> = createStore(
+    // ...
+    controllerMiddleware(controllerWatchers, container) // add container as second param
+  );
 
-  public static* loadUsers(action: Action) {
-    // some logic ...
+  return store;
+}
+```
 
-    yield UsersSaga.updateStore({
-      users: [],
-    });
+```ts
+// User.controller.ts
+import { ControllerBase, AbstractStore } from 'app-redux-utils';
+import { State } from "./State";
+import { UsersActions } from "./Users.actions";
+import { UsersStore } from "./Users.store";
+import { metadata } from "./metadata"; // read cheap-di README to know what is it
+
+@metadata
+export class UserController extends ControllerBase<State> {
+  constructor(
+    store: AbstractStore<State>,
+    private readonly service: MyService
+  ) {
+    super(store);
   }
+  // ...
+}
+```
 
-  public static* loadUser(action: Action<ILoadUserData>) {
-    // some logic ...
+```ts
+// App.tsx
+import { useEffect } from 'react';
+import { container } from 'cheap-di';
 
-    const response = yield UsersApi.getUserById(action.payload.userId);
+const App = () => {
+  useEffect(() => {
+    container.registerType(MyService);
+  }, []);
 
-    yield UsersSaga.updateStore({
-      openedUser: response.data,
-    });
-  }
+  return /* your layout */;
+}
+```
 
-  // other sagas...
+### <a name="redux-saga"></a> Using with redux-saga
+
+```ts
+// Users.saga.ts
+import { Action } from "app-redux-utils";
+import { LoadUserData } from "../redux/Users.actions";
+
+export class UsersSaga {
+  static * loadUserList() {/* ... */}
+  static * loadUser(action: Action<LoadUserData>) {/* ... */}
+  static * loadCurrentUser() {/* ... */}
+  static * loadSomethingElse() {/* ... */}
 }
@@ -346,3 +384,3 @@ ```
 import { createReducers } from "app-redux-utils";
-import { applyMiddleware, compose, createStore, Store } from "redux";
+import { applyMiddleware, createStore /* ... */ } from "redux";
 import createSagaMiddleware, { SagaMiddleware } from "redux-saga";
@@ -355,11 +393,7 @@
 export function configureApp(): Store<State> {
-  const sagaMiddleware: SagaMiddleware = createSagaMiddleware();
-  const middleware = applyMiddleware(
-    sagaMiddleware
-  );
+  // ...
 
-  const composeEnhancer = window["__REDUX_DEVTOOLS_EXTENSION_COMPOSE__"] || compose;
   const store: Store<State> = createStore(
     createReducers(getReducers),
-    composeEnhancer(middleware)
+    composeEnhancer(applyMiddleware(createSagaMiddleware()))
   );
@@ -366,0 +400,0 @@

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

34610

increased by11.09%

Number of package files

58

increased by13.73%

Lines of code

358

increased by12.93%

Number of lines in readme file

395

increased by9.42%

Worsened metrics

Dev dependency count

9

increased by12.5%

Dependency changes

• + Addedredux@4.1.1(transitive)

• - Removedredux@4.1.0(transitive)

• Updatedredux@4.1.1