brechtbilliet / ngrx-undo Goto Github PK

I started using ngrx-undo but I got an error when I tried to load the bundle.

ReferenceError: Invalid left-hand side in assignment

So I dived into the bundle and it's nothing with your code. It's an error in the header (not sure how it is called).

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@ngrx/store'), require('@angular/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@ngrx/store', '@angular/core'], factory) :
    (factory((global.ngrx-undo = global.ngrx-undo || {}),global.ngrx.store,global.ng.core));
}(this, (function (exports,_ngrx_store,_angular_core) { 'use strict';

And more specifically in this line

(factory((global.ngrx-undo = global.ngrx-undo || {}),global.ngrx.store,global.ng.core));

The thing is that global.ngrx-undo is invalid because of the hyphen. It should've been global['ngrx-undo'] but apparently rollup doesn't check this.

I took a look in how @angular/platform-browser solves this and they use camelCasing so they use platformBrowser.

So I believe the moduleName should be set to ngrxUndo.

I took a look in the @angular/platform-browser rollup and they have ng.platformBrowser.

I would suggest not to use ngrx.undo because @ngrx uses that pattern and might interfer in the future if they come up with an undo like module.

Will send a PR.

Would it be possible to get an update to remove the peer dependency on @ngrx-store v6.1.0 so that it will be without warning when using @ngrx-store v7 ?

Using the package, my app keeps on crashing every time I did some undo's.
In my sandbox I have the following...

/**
   * Delete a post
   */
  public deletePost(post: Post): void {
    const action = new actionsPosts.Delete(post.id);

    this.appState.dispatch(action); // optimistic update
    this.postService.delete(post.id).subscribe(
      result => {},
      (error: Error) => {
        this.appState.dispatch(undo(action)); // rollback update
      }
    );
  }

(Working with chrome 61)

Thanks in advance!

Just wondering if you want something like this in ngrx-undo, no problem if not. But I believe it's best practice to work with action creators when working with Redux which will create the desired action object for you. It could be added to ngrx-undo as well in, for example, the following form.

import { undo } from 'ngrx-undo';

store.dispatch(action);
store.dispatch(undo(action));

instead of

import { UNDO_ACTION } from 'ngrx-undo';

store.dispatch(action);
store.dispatch({type: UNDO_ACTION, payload: action});

Let me know what you think, happy to do a PR.

We ran into an issue where the first element in the array of executed actions (firstAction) was @ngrx/store/update-reducers, thus rootReducer(initialState, firstAction); was causing the stores to reset to their initial state.

I've written a fix for it, and i'll submit a pull request, please take a look at it!
Thanks in advance!

Edit:
It was caused by some strange interaction with another meta-reducer, yet I think it's not necessary to store the init and update actions.
Changing their order in the metaReducers array solved our problem.

i.e.:
[handleUndo, localStorageSyncReducer] // buggy
[localStorageSyncReducer, handleUndo] // working

I tried pointing to the latest master as well as this commit (96e0d9f), which was working fine with angular 5.
In both cases, I get below error

ERROR in /<fullpath>/node_modules/ngrx-undo/index.ts
Module build failed (from /<fullpath>/node_modules/@ngtools/webpack/src/index.js):
Error: /<fullpath>/node_modules/ngrx-undo/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (<fullpath>/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:752:23)
    at plugin.done.then (/<fullpath>/node_modules/@ngtools/webpack/src/loader.js:41:31)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)

Adding node_modules/ngrx-undo/index.ts to tsconfig.json ("include": ["./node_modules/ngrx-undo/index.ts"]) fails with other errors pointing to main.ts.

ERROR in ./src/main.ts
Module build failed (from /<fullpath>/node_modules/@ngtools/webpack/src/index.js):
Error: /<fullpath>/projects/app-shell/src/main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/<fullpath>/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:752:23)
    at plugin.done.then (/<fullpath>/node_modules/@ngtools/webpack/src/loader.js:41:31)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)
ERROR in ./src/polyfills.ts
Module build failed (from /<fullpath>/node_modules/@ngtools/webpack/src/index.js):
Error: /<fullpath>/projects/app-shell/src/polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/<fullpath>/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:752:23)
    at plugin.done.then (/<fullpath>/node_modules/@ngtools/webpack/src/loader.js:41:31)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)

Hello!
How to use store.dispatch(undo(action)); with that model?

Property 'type' is missing in type 'typeof UpdateObject' but required in type 'Action'.

I'm using @nrwl/nx in my project for ngrx integration. I would also like to use this lib for optimistic updates, but following the nx way of doing them, its not possible to use this lib, due to the way the actions are compared.

This is my effect method:

@Effect()
  editIngredients = this.d.optimisticUpdate('EDIT_INGREDIENT', {
    run: (a: EditIngredient, state: MasterDataState) => {
      const action = { type: 'INGREDIENT_EDITED', payload: a.payload };
      this.apiService.editIngredient(a.payload.ingredient);
      return action;
    },

    undoAction: (a: EditIngredient, e: any) => {
      const action = { type: 'INGREDIENT_EDITED', payload: a.payload };
      return (undo(action));
    }
  });

This does not work because the action I pass to the undo method is not the same as the one fired in the run method, because in the lib actions are compared using '!==' operator during filtering.
I just quickly tested, but comparing the actions using '!Object.is()' method would solve the problem.

Would this fix have any other effects to the lib?

If not, I'd be happy to make a PR.

Please could you upgrade for ngrx v4?

To upgrade to Angular 7, I get an error that ngrx-undo has a peer dependency on rxjs ^5.1.0 and it won't allow the upgrade. Could this library update its dependency to rxjs 6+?

When ngrx lazy loads a reducer, the meta reducers are re-created. This breaks the undo reducer because it locally stores the initial state and executed actions. When undoing an action in this situation, any actions executed before the last reducer was loaded will be lost.

initialState and executedActions should be stored outside the meta reducers so they don't get reset.

Thanks! Still being used! Trying to upgrade from 12 to 13 and it's complaining about your lib being out of date