I personally don't love this naming:

constructor(private ngxs: Ngxs) {
   this.ngxs.dispatch(...);
}

I'd like to make it Store name but then that would conflict with the @Store() decorator. Anyone got any ideas?

Make the ngxs.select support similar options as the decorator.

Allow the ability to provide a global error handler

Hi,
According to your style guide events can be in a separate folder from the store folder.

Given,
import { Store, Mutation } from 'ngxs';

@Store({
defaults: {
feed: false,
animals: []
}
})
export class ZooStore {
@mutation(FeedAnimals)
feedAnimals(state, { payload }) {
state.feed = true;
}
}

Where do you recommend mutations live? In an enterprise level application with different modules, the ZooStore can be cluttered quite rapidly if all Mutations live in the Store class.

Cheer

Component

logout() {
	this.ngxs.dispatch(new Logout()).subscribe(() => {
		this.router.navigate(['']); // <-- This code never runs
	});
}

Store

@Action(Logout)
logout() {
	this.loginService.logout();
}

Figure out how to get rid of having to do @Injectable() along w/ the @Store decorator.

When you lazy load it causes the state to be overridden because of DI overlap.

I used to build my app for prod with ng build --app=default -oh=media --prod but the ngxs store is not working with prod builds with this command, ngxs works without issues in dev modeng s -e mock --extract-css --preserve-symlinks --proxy-config proxy.conf.js

After trying various -prod mode options, I am thinking UglifyJS is causing this issue.

unfranaltiy angular-cli doesn't have option to desable UglifyJS with -prod builds.
As a workaround, I am using following command to emulate prod builds.
ng build --app=default -oh=media -e prod --aot=true --build-optimizer=true --named-chunks=false --sourcemaps=false (this cannot add service-worker unfraunalty)

wonder if anyone experiencing this issue when building for prod with angular-cli!

Create a reactive forms plugin

I guess you're waiting for things to stabilize, but it would be helpful if you add an example project to the repo.

automatize changelog generation?
I could add the required config files + devDeps, if there is any interest.

Ability to create stores within stores. https://gist.github.com/amcdnl/6998c0dbad7af5f424dc7719527f9fb8

One idea is to create dot notation with store names like:

@Store({
   name: 'cart'
})
export class CartStore{}

@Store({
   name: 'cart.items'
})
export class CartItemsStore {}

then you hook it up like:

@NgModule({
   imports: [
      NgxsModule.forRoot([CartStore, CartItemsStore])
   ]
})
export class MyModule {}

A markdown file with guidelines for this would be helpful

Currently I have 2 stores, AppStore and AuthStore. AppStore is controlled by the AppModule for general all-purpose states for the app. AuthStore is managed by the AuthModule.

In AppModule:

  imports: [
    //...
    NgxsModule.forRoot([AppStore]),
    AuthModule,
    // ...
  ]

In AuthModule:

  imports: [
    //...
    NgxsModule.forFeature([AuthStore]),
    AuthModule,
    // ...
  ]

If I do this in AuthModule, I get an error:

Error: Store has already been added app
at _loop_1 (ngxs-api.js:77)
at StoreFactory.add (ngxs-api.js:98)
at StoreFactory.addAndReturnDefaults (ngxs-api.js:114)
at NgxsFeatureModule.initStores (ngxs-api.js:455)
at new NgxsFeatureModule (ngxs-api.js:451)
at _createClass (core.js:10895)
at createProviderInstance$1 (core.js:10865)
at initNgModule (core.js:10818)
at new NgModuleRef (core.js:12073)
at createNgModuleRef (core.js:12062)

AuthModule isn't LazyLoaded. If I removed the import from AuthModule and add the AuthStore to the import in AppModule it works. I'd rather not add the AuthStore into the AppModule if I can help it.

Am I not doing this correctly? Does forFeature() only work if the module is lazy loaded?

'Select' is https://amcdnl.gitbooks.io/ngxs/content/concepts/action.html.

It is the action page that appears, NOT the ../select.html

Cheers

Create a adapter that will allow redux middleware to be compat. Should be easy, just mapping the signatures.

In Redux Dev Tools the previous state is shown.

Here is an example

Here is a stackoverflow question with a more detailed explanation of the problem.

[x] Feature Request

User login to our app then opens a second tab and continues. Later on, logs out from the active tab. All other tabs will remain in the dark as their state is not updated.

How about we do something to rehydrate peer states when persisted storage (session) changes.

Example from NGRX.

// actions
export enum AuthActionTypes {
  AuthMultiTabSyncRequest = '[AUTH]: Multi-tab Sync Refresh' // multi-tab session support
}
export class MultiTabSyncRequest implements Action {
  readonly type = AuthActionTypes.AuthMultiTabSyncRequest;
  constructor(public payload: string) {}
}
sync(payload: string) {
  this.store.dispatch(new MultiTabSyncRequest(payload));
}

// reducer
export function authMetaReducer(reducer: (state: AuthState, action: AuthActions) => any) {
  const storageEngine = localStorage
  const storageKey = 'session';
  return function(state, action) {
    if (
      state == undefined ||
      (action.type === AuthActionTypes.AuthMultiTabSyncRequest &&
        action.payload.token === storageKey)
    ) {
      const persistedState = storageEngine.getItem(storageKey);
      return persistedState ? JSON.parse(persistedState) : reducer(state, action);
    }
    const nextState = reducer(state, action);
    if (state.status.signature !== nextState.status.signature) {
      storageEngine.setItem(storageKey, JSON.stringify(nextState));
    }
    return nextState;
  };
}

 // authService
  private enableStorageEvents() {
    if (this.options.storage) {
      this.options.storage.eventListener(
        'storage',
        event => {
          this.action.sync(event.key);
        },
        false
      );
    }
  }

The storage plugin may be the best place for this.

Create a Plugin that saves the store into SessionStorage. This would give the benefit that the data is cleared when browser sessions ends, which in many cases is good.

According to the docs we should generate three files.

todos.store.ts
todos.store.spec.ts
todos.events.ts

This could also look for the closest module and automatically add the store as a declaration and use it in the forRoot or forFeature functions.

ngxs.selectOnce() would return first() auto.

The dev-tool scrrenshot below reflects my store:

Here are the mutations:

@Store(
    {
      defaults: new Rs()
    } )
export class RsStore {
 @Mutation( AddRsRosPainUi )
  addPainUi( state, { payload } ) {
    state.ros.ui.pain = payload
  }
  
  @Mutation( InitRsRosPainUi )
  initRsRosPainUi( state, { payload } ) {
    state.ros.ui.pain = new FormState()
  }
  
  @Mutation( ReInitRsRosPainUi )
  reInitPainUi( state, { payload } ) {
    state.ros.ui.pain = payload
  }
  
  @Mutation( UpdateRsRosPainUi )
  updatePainUi( state, { payload } ) {
    state.ros.ui.pain = payload
  }
}

@Store(
    {
      defaults: new Git()
    } )
export class GitStore {

  @Mutation( AddGitRosPainUi )
  addPainUi( state, { payload } ) {
    state.ros.ui.pain = payload
  }
  
  @Mutation( InitGitRosPainUi )
  initGitRosPainUi( state, { payload } ) {
    state.ros.ui.pain = new FormState()
  }
  
  @Mutation( ReInitGitRosPainUi )
  reInitPainUi( state, { payload } ) {
    state.ros.ui.pain = payload
  }
  
  @Mutation( UpdateGitRosPainUi )
  updatePainUi( state, { payload } ) {
    state.ros.ui.pain = payload
  }
 
}

Both store updates, but although there are two instances of the PainComponent, the updates are the same.

Question:

1. For the RsStore, I expect the the payload assignments to be

state.rs.ros.ui.pain = payload

and for the GitStore

state.git.ros.ui.pain = payload

However, neither updates the store.
Could you say why is this?. I think this is why both mutations updates both pain references in the store.
2. What other ways could I use to drill-down to the pain property in each store?

Cheers

Add out-of-the-box websockets plugin

It would be great if the @Select could be made generic so we can have type safety when selecting from a store.

Something like this would then be possible:

  @Select<LayoutStore>(state => state.sidenavOpen) <--- type safety for the selectable state
  sidenavOpen$: Observable<boolean>;

Would that be possible?

ATM if you want to do anything async you need to use both and Action and Mutation where the Action will return a new event that triggers a mutation. To me this seems like an unnecessary step. Ngxs already has the ability to handle returning either a raw value, Observable or Promise so I propose we just have Action and that instead of returning an event an action method just returns the new state.

The proposed API would look something like this. Notice that the action methods always resolve in the new state. There are some situations I want to make sure this can handle but thought it would be a good place to start the discussion. One of the things that I would want to solve for is being notified when a particular action is complete. My initial thought is the dispatch method could return an observable that resolves when the action is complete

Hi,
This is a follow-up to a previous post by by at https://github.com/amcdnl/ngxs/issues/44[](https://github.com/amcdnl/ngxs/issues/44)

How do I breakup a large state model into smaller pieces using NgxsModule.forFeature( store) mechanism instead of NgxsModule.forRoot( store) mechanism?

Thanks

A while back I prototyped something like John Papas NGRX-DATA, https://gist.github.com/amcdnl/cafd37bc9a99e2cd7653ebc023e06ffe#file-readme-md

Something we might want to think about one day.

By default the store should clone the default options to avoid mutations from the outside.

Add ability to combine selects via decorators:

@Select(
   {  foo: 'foo.bar', bar: (state) => state.bar },
   (({ foo, bar }) => foo.filter(f => f !== bar)))
bars: Observable<Bar>;

Hi,
How do you suggest to use ngxs with redux dev tool

Hi,
I have a clerking and a registration feature.

// clerking
import { Store } from 'ngxs';

@Store({
defaults: {
feed: false,
animals: []
}
})
export class ClerkingStore {}

// registration
import { Store } from 'ngxs';

@Store({
defaults: {
present: false,
noShow: false
}
})
export class RegistrationStore {}

What do I need to do to create feature stores instead of a single store.

Maybe you could include it in the documentation under the subheading 'Creating Feature Store'

Thanks

Is there a way to pass the state type to Select?

// Also accepts a function like our select method
@Select(state => state.animals) animals$: Observable<string[]>;
as
@Select(state<StateType> => state.animals) animals$: Observable<string[]>;

On this line of code: https://github.com/amcdnl/ngxs/blob/master/src/factory.ts#L18 we programmatically create a new instance of the store.

Because the instance is not found yet, it throws an error. If I provide the new instance, our classes get initialized twice and the first time without the dependencies it needs.

Asked on SO:
https://stackoverflow.com/questions/49100531/angular-dependency-injection-get-new-instance

How to reproduce : https://stackblitz.com/edit/ngxs-simple-uchv5v
this works if we remove async

import { Store, Action, Mutation } from 'ngxs';

export class Add {}
export class AddSuccess {}

@Store({
  defaults: {
    count: 0
  }
})
export class AppStore {
  @Mutation(AddSuccess)
  addSuccess(state) {
    state.count++;
  }

 @Action(Add)
  async add(state) {
    return new AddSuccess()
  }

}

Hey!
Flying over the Code, but dont see the benefit over ngrx
If there is any could you please explain what the benefits are?

Hi,
Given the store

@Store({
  defaults: {
    feed: false,
    animals: []
  }
})
export class ZooStore {}

What is the recommended way letting the store appear in redux-devtool at application start. Currently I see an '@@init' in the devtool.

Cheers

[x] Docs

LoggerPluginModule.forRoot({
      logger: console,
      collapsed: false  // <-- code is collapsed not expanded
})

https://amcdnl.gitbooks.io/ngxs/plugins/logger.html

trying to build with ng build --app=default --prod -oh=media -e mock and getting above error.
project I am testing: https://github.com/xmlking/nx-starter-kit

ERROR in Error during template compile of 'CoreModule'
  Function calls are not supported in decorators but 'ReduxDevtoolsPluginModule' was called.

LocalStoragePluginModule.forRoot({
      strategy: StorageStrategy.localstorage, // <-- code is not camleCase
    })
  ]

https://amcdnl.gitbooks.io/ngxs/plugins/localstorage.html

Trying to follow this guide to add ReduxDevtoolsPluginModule (and LocalStoragePluginModule)
https://amcdnl.gitbooks.io/ngxs/plugins/devtools.html

import { NgxsModule, ReduxDevtoolsPluginModule } from 'ngxs'; in app.module.ts

gives the following typescript compilation error:
[ts] Module '"/Users/.../node_modules/ngxs/ngxs-api"' has no exported member 'ReduxDevtoolsPluginModule'.

I am trying to use LoggerPluginModule and it works ok as long as I have a single store. Once I add a 2nd store, I start getting the following error (Windows, Angular 5) in both Chrome and IE. Here I've added a second store "WellStore" and it's giving error.

Add example of how to cache requests.

[x] enhancement

Allow localStorage to be passed in as an option.

This is great for the mobile environments (native script) where there is no localStorage.

Any option that provides setItem() and getItem() should do.

There are several parts of the library that open the user up to potential mistakes that SHOULD be caught by the compiler. An example of this is the Select decorator and the fact that the Ngxs class isn't generic so the select method cannot be typed. Anything where you pass in a string (like the selectors) are an opening for potential mistakes

Hello, there is a bug occuring with actions on lazy loaded modules, but only when LoggerPluginModule is imported.

I have tried to make the example as simple as possible :
The button dispatches an event which is watched by an action.
The action simply dispatches an event which is watched by a mutation.

Stackblitz example :
https://stackblitz.com/edit/ngxs-lazy-loaded-module?file=main.ts

Repro steps :
Navigate to the lazy loaded module by clicking on the "toggle component" button
Clicking the "Toggle visibility" button raises an error (action managed on ToggleStore imported with forFeature).

If we remove the LoggerPluginModule import, everything works fine.

Look at web worker integration

Create a router plugin

Since a class with @Store has the "name" metadata attached to it we should be able to use the class as a selector. I think this helps cleanup the basic use case and keep folks from having to keep track of store names themselves.

class MyComponent() {
  @Select(MyStore) data: Observable<DataModel>;
}

I don't think having plugins that call methods to pass options will work with AoT.