brechtbilliet / ngrx-undo Goto Github PK
View Code? Open in Web Editor NEWan undo library for ngrx/store
License: MIT License
an undo library for ngrx/store
License: MIT License
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)
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.