Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jul 26 2020 05:47
    amithegde commented #20
  • Jul 26 2020 05:46
    amithegde commented #20
  • Jul 06 2020 09:12
    the0rem commented #20
  • Oct 15 2019 16:45
    johannesjo commented #20
  • Sep 21 2019 04:04
    JimTheMan closed #16
  • May 04 2019 00:15
    felixunivers edited #17
  • Apr 29 2019 21:30
    felixunivers opened #17
  • Apr 10 2019 21:15
    rezord opened #16
  • Jan 31 2019 20:44
    alex-okrushko commented #1511
  • Jan 31 2019 20:21
    brandonroberts edited #1538
  • Jan 31 2019 20:20
    brandonroberts edited #1538
  • Jan 31 2019 20:18
    brandonroberts labeled #1538
  • Jan 31 2019 20:18
    brandonroberts labeled #1538
  • Jan 31 2019 20:18
    brandonroberts opened #1538
  • Jan 31 2019 12:11
    timdeschryver closed #1536
  • Jan 31 2019 12:11
    timdeschryver commented #1536
  • Jan 31 2019 12:08
    timdeschryver closed #1537
  • Jan 31 2019 12:08
    timdeschryver commented #1537
  • Jan 31 2019 11:59
    olefrank commented #1036
  • Jan 31 2019 11:59
    olefrank commented #1036
matrixbot
@matrixbot
@this-is-me:matrix.org Why not just use two stores in parallel?
@this-is-me:matrix.org Why are you migrating to ngrx? Usually I know it the way around :D
Carlos Esteban Lopez Jaramillo
@luchillo17
It's troublesome to deal with circular deps between actions, also the devtools doesn't function all that well, sometimes the diff of the action shows in the next action, the commit action doesn't work with Ngxs and not sure if the jump/skip function does anything
And the biggest thing is the system was made by someone else 2 years ago, it's all jumbled and most of the team knows Ngrx better, so we discussed the swap since the old architecture was already bad.
maxeber
@maxeber
image.png
Hi guys! I am having a lot of trouble trying to split my main reducer into different files, just to better organize my stuff:
So what I tried to achieve is mainly to extract some on(..) from the LeaderboardReducer to some other files like LeaderboardActivityReducer. Somehow I can't find the right ay to do it. Does anyone have a solution for this?
Derek
@derekkite
This is a feature right? If you create a feature state where your break down the feature into smaller sections you can have multiple reducers, one for each specific section.
https://ngrx.io/api/store/ActionReducerMap this is an object with {proportyname: reducer} , and your state corresponds with the same properties.
hellraisercenobit
@hellraisercenobit
hello i have some troubles with router-store, with buildOptimizer enabled featureSelector using selectRouteParams produce error like unexpected undefined value should be function or string... on v9.2 somebody have an idea? ^^
Jack
@jackmercy
Hello guys,
I just started to use @ngrx/entity and I ran to a problem that I can not add new Item to the beginning of the entity by using addOne() function.
Is there any other solution for me?
Derek
@derekkite
@jackmercy cannot meaning what? What is the error?
HMAIDI Thamer
@hmaidithamer
Hello All,
please how to listen and get the result of distapsh action on my effects
matrixbot
@matrixbot
Andreas Weinzierl by selecting from the state of the store?
HMAIDI Thamer
@hmaidithamer
i have a dynamic action this.processStore.dispatch(action); and i need to wait and get the result of my action
?
Derek
@derekkite

@hmaidithamer First, try to work around it.
second, dispatch(myaction(data, tag), then in the effect

createAction((() =>
  this.actions$.pipe(
    ofType(myaction),
    mergeMap(action => myapicall(action.data).pipe(
         map(response => myresponseaction({response: response, tag: action.tag}),
         //error handle
)))

then in the selector, watch for the tag with a parameterized selector https://timdeschryver.dev/blog/parameterized-selectors, where the tag is the parameter, and the selector will fire when it sees the tag in the state.

My preference is to try to figure out a way that it isn't needed. If you have an entity with the tag or id as key, before you start make sure it is clear, then select on that id or key and the data will be what you want.

HMAIDI Thamer
@hmaidithamer
@derekkite First thanks
@derekkite Second Thanks
Marko Stanimirović
@markostanimirovic

Hi everyone! I just released NgRx Handlers - A plugin for boilerplate elimination. I would appreciate if you check it out and let me know what you think :)

https://github.com/markostanimirovic/ngrx-handlers

Jack
@jackmercy
@derekkite The addOne() function of entity adapter only add the new item to the end of list e.g: [2, 3, 4] => [2, 3 , 4, 5]
I want to add an item to the beginning of list like [2, 3, 4] => [5, 2, 3 , 4]
Neeraj Jain
@jainneeraj7483_gitlab
Hello Everyone, I am new to NGRX and having some trouble with feature modules, I have a feature module lazily loaded on a route, and as soon as the lazy module gets loaded it triggers @ngrx/store/update-reducers action and it causes all selector to get fired even when there is no change in the slice of state those selectors are watching.
Derek
@derekkite
@jainneeraj7483_gitlab that action does nothing unless a reducer responds to it. What reducer response, and how?
Neeraj Jain
@jainneeraj7483_gitlab

@derekkite Thank you for responding, I have 2 Modules in my main angular app they both have states and registering as
PeripheralCommLayerModule

@NgModule({
  declarations: [PeripheralCommLayerComponent],
  imports: [
    StoreModule.forFeature(peripheralIntegrationFeatureKey, peripheralReducer)
  ],
  exports: [PeripheralCommLayerComponent]
})
export class PeripheralCommLayerModule {
  static forRoot(environment): ModuleWithProviders<PeripheralCommLayerModule> {
    return {
      ngModule: PeripheralCommLayerModule
      , providers: [{ provide: ENVIRONMENT, useValue: environment }]
    };
  }
}

FuseDeviceTesterModule

@NgModule({
  imports: [
    EffectsModule.forFeature([DeviceTesterEffect]),
    StoreModule.forFeature(fuseDeviceTesterFeatureKey, fuseDeviceReducer),
  ],
  declarations: [
    FuseDeviceTesterComponent,
  ],
  exports: [FuseDeviceTesterComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FuseDeviceTesterModule {
  static forRoot(environment): ModuleWithProviders<FuseDeviceTesterModule> {
    return {
      ngModule: FuseDeviceTesterModule,
      providers: [{ provide: ENVIRONMENT, useValue: environment }]
    };
  }
}

I am importing PeripheralCommLayerModule in my app.module.ts

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    PeripheralCommLayerModule.forRoot(environment),
    EffectsModule.forRoot([]),
    StoreModule.forRoot({}, { metaReducers }),
    // !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : []
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

And FuseDeviceTesterModule is a lazy-loaded module, which is loaded when I route to a particular URL.

When FuseDeviceTesterModule is is firing @ngrx/store/update-reducers action which is received by PeripheralCommLayerModule's reducer and after it selector of PeripheralCommLayerModule is getting fired.

Reducer of PeripheralCommLayerModule :

export const peripheralIntegrationFeatureKey = 'peripheralIntegrationState';

export interface PeripheralIntegrationState {
  peripheralServerInstanceInfo: PeripheralServerInstanceInfo;
}

export const initialState: PeripheralIntegrationState = {
  peripheralServerInstanceInfo: {
    peripheralServerIP: 'localhost',
    peripheralServerPort: 47017
  },
};

const peripheralIntegrationReducer = createReducer(
  initialState,
  on(UpdatePeripheralServerPortAndIP, (state, payload) => ({
    ...state,
    peripheralServerInstanceInfo: payload.peripheralServerInstanceInfo
  })),
);

export function peripheralReducer(state: PeripheralIntegrationState, action: Action): PeripheralIntegrationState {
  return peripheralIntegrationReducer(state, action);
}
Derek
@derekkite
So the PeripheraCommLayer module reducer watches for the init action. What does it do?
Derek
@derekkite
Typically i dispatch initialization actions in the component constructor.
Neeraj Jain
@jainneeraj7483_gitlab
@derekkite it updates the state if the dispatched action matches the one in on method or returns current state as a default case, my problem here is when fusedeviceTesterModules get loaded it dispatch`@ngrx/store/update-reducersand somehow it is triggering the selector i have onperipheralServerInstanceInfo` , i am not able to understand why the selector is triggering if their is no change in my state.
Derek
@derekkite
@jainneeraj7483_gitlab the memoization is a===b which compares object instances.
Neeraj Jain
@jainneeraj7483_gitlab

@derekkite, Thanks for guiding me in the right direction, and yes that is what causing the problem, I have both my states(of both modules) synced with localStorage, and when fusedeviceTesterModules is loaded it updates the localStorage by dispatching @ngrx/store/update-reducer and my local-storage is updating store of PeripheraCommLayer module (somehow it is not able to identify the store has same data that is in the localStorage :-( ) and as the store is updated my selector again is not able to identify that store has same data (as my selector is slicing the store on an object and because of store immutability principle(or recommendation) a===breference check is not able to determine that deeply the object still contains same data as store now has a new object).

I have written an IsEqual function and now I am using createSelectorFactory instead of createSelector and passing it custom memoization function:

const isEqualFunc = (last: any, current: any) => {
  let flag: boolean = last && current || last === current;
  if (last && current) {
    const prevProps: string[] = Object.keys(last);
    const nextProps: string[] = Object.keys(current);
    flag = prevProps.length === nextProps.length;
    if (flag) {
      for (let i = 0; i < prevProps.length; i++) {
        if (typeof last[prevProps[i]] === 'object') {
          if (!isEqualFunc(last[prevProps[i]], current[prevProps[i]])) {
            flag = false;
            break;
          }
        }
        else {
          if (last[prevProps[i]] !== current[prevProps[i]]) {
            flag = false;
            break;
          }
        }
      }
    }
  }
  return flag;
};

const customMemoize = (projectFunc) => resultMemoize(projectFunc, isEqualFunc);

export const getSomeInstance: MemoizedSelector<object, SomeInstance> = createSelectorFactory(customMemoize)(
  selectFeatureStoreSlice,
  state => state.someInstance
);

it's now working fine.

Can someone please verify and tell me if I am handling the scenario correctly, Thanks in advance :-)

Derek
@derekkite
I'd suggest using actions that you define for initialization of each feature. @jainneeraj7483_gitlab
Neeraj Jain
@jainneeraj7483_gitlab
@derekkite pardon me but I am not able to understand what are you suggesting, can u please elaborate a little.
Fahad Kheratkar
@fahadbraveknight
How to use ngrx between multiple tabs
without using localstorage
is there support for indexed db?
MikeOne
@MikeOne
@fahadbraveknight - not out of the box.
apcs.guide
@ApcsGuide_twitter
Is there a way I can call a selector without knowing the actual function until runtime? for example: @Input() selectorName: string; this.store.selector(selectorName)
matrixbot
@matrixbot
Andreas Weinzierl yes, but you need to get to know the selector at runtime, e.g. have a map of seceltors associated to names
nunobotelhokk
@nunobotelhokk

I have a reducer with the following state type:

{
loading: boolean;
info: {
property: string;
something: string;
}
}

On listening to an action i should return that same type to the state. I'm doing the following:

{
...state,
loading: true,
property: 'something
}

Shouldnt i need to do:

{
...state,
loading: true,
info: {
...state.info,
property: 'something
}
}

I'm asking because i always did the latter but VSCode isnt giving me any warning/error.
I'm doing some legacy code refactor so i'm not able to run the project atm, too many things are breaking.

matrixbot
@matrixbot
Andreas Weinzierl yes, you should - do you use type annotations?
Andreas Weinzierl why are you cross posting?
nunobotelhokk
@nunobotelhokk
You mean i'f my giving the correct types on the action and reducers? I am
Also, i noticed the last answer here was in oct 13, i was in doubt if this was still active
matrixbot
@matrixbot
Andreas Weinzierl it at least should be able to deduce the return type of the reducer
Andreas Weinzierl then you should get an error if you return trash
SAGO
@SAGOlab

Hi there I have this effect:

loadTasks$ = createEffect(() =>
    this.actions$.pipe(
      ofType(fromTasksAction.loadTasks),
      withLatestFrom(this.store.select(selectTasks)),
      mergeMap(() =>
        this.tasksService.getPotOwnersTasks().pipe(
          map(tasks => fromTasksAction.loadTasksSuccess({ tasks })),
          // delay(1000),
          // repeat(),
          catchError(error => of(fromTasksAction.loadTasksFailure({ error })))
        )
      )
    )
  );

in my component.ts I call this effect with:

  ngOnInit(): void {
    this.store.dispatch(loadTasks());
    this.loadTasks();

  loadTasks() {
    this.tasks$ = this.store.pipe(shareReplay(1), select(selectTasks));
  }

so my store is:

ngrx store

Now I need to fetch the single object from store:

my get in service is:

getTask(containerId, taskInstanceId): Observable<Tasks> {
    const url = this.apiUrl + 'containers/' + containerId + '/tasks/' + taskInstanceId;

    return this.http.get<Tasks>(url, this.options);
  }

How can I loop in store and display the single task from tasks list in store?

thanks a lot

Michał Kwaśniewski
@bd-Kwasniewski

Hello, I have this long lasting question. Is it ok to use one selector as a "prop source" of another
e.g
selector 1 : selectBookById = createSelector(selectBooks, (books, props) => books.filter(book => book.id === props.id))
selector 2 : selectActiveId = crateSelector(selectActiveIdState, (activeIdState) => activeIdState.activeId)

and now

    selectActiveBook  = createSelector(
        booksStateAndActiveIdState => booksStateAndActiveIdState, 
        selectActiveId, 
       (booksStateAndActiveIdState, activeID) => selectActiveId(booksStateAndActiveIdState, {id: activeId})
    )

Elaboration: I find myself often duplicating selectors for specific entity by its ID and also i have selectors for "active" entities e.g. ones that are in url param in given moment
I would like to write ...byId selectors and latter only enhance them with active
is the way above valid ?

cuznerdexter
@cuznerdexter

Does anyone know how or have links for using StoryBook & Angular with NGRX Store ?

I have followed the StoryBook tutorial but still cannot figure out how to use StoryBook with NGRX Store. I can use StoryBook with Angular Dumb Components fine. I need to be able to set the NGRX Store State for the stories of my Nested components.

eg. In my SmartComponent I have:

this.accountDebtor$ = this.coreStore.select( coreSelector.selectAccountDebtorState );

In the Story I have:

export const LoadedAccountPanel = (args) => ({
 component: AccountComponent,
 props: args,
});
LoadedAccountPanel.args = {
 panelData: {},
 accountDebtor$: <-- How do I set the State so this gets set using the store ???,
};
cuznerdexter
@cuznerdexter

Hi all,
Anyone see errors like this after running:
nx update && then npm run audit ??

npm ERR! code ELOCKVERIFY
npm ERR! Errors were found in your package-lock.json, run  npm install  to fix them.
npm ERR!     Invalid: lock file's @ngrx/schematics@10.1.0 does not satisfy @ngrx/schematics@10.0.0
npm ERR!     Invalid: lock file's @ngrx/store-devtools@10.1.0 does not satisfy @ngrx/store-devtools@10.0.0

The actual app works fine - using nx serve

I want to fix the errors so I can run my Jenkins job.
Any advice?

JamesDepret
@JamesDepret
Hi, I have a quick question, I'm storing the scroll distance measured from the top of the screen.
Everytime it changes, it dispatches an action, however, one scroll completly fills my inspector with only that action, is there a way to exclude this specific action from the in browser redux inspector?
nunobotelhokk
@nunobotelhokk
I have a method logout on my authentication service which only clears the user cookies. Since i'm using this service method on my effects, it's expecting to return an observable. What can i do here? Just return of() ?
5 replies
raineer24
@raineer24
hi