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 05:47
    amithegde commented #20
  • Jul 26 05:46
    amithegde commented #20
  • Jul 06 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
RoboZoom
@RoboZoom

@RoboZoom

export const prefAssessState = (state: index.State) => state.preferenceAssessments;
export const getPrefAs = createSelector(prefAssessState, selectEntities);
export const getIDs = createSelector(prefAssessState, selectIds);
export const getOrderedValues = createSelector(getIDs, getPrefAs,
    (someIDs: string[], Ents: {[id: string]: preferenceAssessmentItem }) => someIDs.map(x => Ents[x]));

If you select getOrderedValues you have an iterable array. The selectEntities and selectIds are provided by the EntityAdapter

So you just need to provide the top state selector, and then plug in as shown, and you'll get something in
Make sure you explicitly type in the last line as shown
Good luck @tylerlittle !
tylerlittle
@tylerlittle
Thanks @RoboZoom !
Thanks @derekkite !
Bhargava Ramu Ch.S.S
@_Bhargava_Ramu_twitter

hey guys, I am using entities and instead of having empty entities at the start I want to add a default item in the initial state. I tried something like below:

const id = uuidv4()

const zeroState = adapter.getInitialState({
  activeTabId: id,
});

const homeTab = {
  pageID: id,
  pageTitle: 'Home',
} as PageInfo;

export const initialState = adapter.addOne(homeTab, zeroState);

It works fine in dev environment and ng build --prod=true also builds fine. But when I deploy the application doesn't run/load anything and instead throws Uncaught Error: Cannot enable prod mode after platform setup..

Can someone tell me on how to add an item to initial entity state ?

Derek
@derekkite
@_Bhargava_Ramu_twitter https://github.com/ngrx/platform/blob/master/modules/entity/src/entity_state.ts
const zeroState = adapter.getInitialState({
    ids: [id],
    entities: {[id]: homeTab},
  activeTabId: id,
});
Bhargava Ramu Ch.S.S
@_Bhargava_Ramu_twitter
@derekkite thank you
Stephen Adams
@Stephenradams
Hi, I'm working on an app and inside the app, we have a large piece of state data, which has a fairly complex structure. I'm writing a new Action that updates a small part of the state. So I need to search through the state data and find within the state where the new piece of data the Action is passing should be inserted into the state.
So my on() function will need to perform a more complex task. I was wondering what is the best approach for something like this? I know a selector will get the data and I could create a composite selector to get more complex data, but what if I want to perform a more complex task when updating the state?
Stephen Adams
@Stephenradams
Actually, I think I've found the answer to my question. I should listen for this Action in an Effect, then pass the data to be updated into the state and have a Service create a new updated version of the state data then dispatch a new Action which updates the State in the Store.
Fernando Baba
@fbaba-nibtravel

Hi All, I'm trying to install @ngrx/store-devtools into an existing application and upon adding the StoreDevtoolsModule.instrument to app modules, I get the following error: Cannot instantiate cyclic dependency! ErrorHandler ("[ERROR ->]"): in NgModule AppModule

Can anyone help me with this?

Phife67
@Phife67

Hi, what is considered best practice when dealing with stale state? I get data from a rest api, then normalize the response into different entities and upsert the store.

The issue I'm running into are deletions of entities on the server.

So for example the app fetches projects on load, then the user can open multiple of those projects at once and I have task entities for several projects in the store at the same time.

When the user closes a project I currently dont remove all related entities across the store. So when the project is opened again and the data from the api response is upserted, deleted tasks would still be in the store.

Would it be best to remove all the entities after closing the project or before adding new data to the store? Or ist there a better solution?

Derek
@derekkite
@Phife67 This is a common issue where you have caching of data on the browser. Either a polling strategy, or a refresh when the specific data is used, or a websocket to update the cache as changes occur on the server.
Tony Xavier
@vinzandtonz
Hi all, need a small help
saveQuiz$ = createEffect(() =>
    this.actions$.pipe(
      ofType(quizActions.addQuiz),
      map(action => action.saveQuiz),
      switchMap((quiz) => this.quizDataService.postQuiz(quiz)),
      tap((quizId) => console.log('NEED THE ACTION PAYLOAD HERE')),
      map((quizId:number) => quizActions.addQuizSuccess({quiz:{ id:quizId }})),
      catchError(() => EMPTY)
    )
  );
This the effect that i created , the issue is i need to access the action.payload after the switchmap (which calls the api). Is there any way i can do it ?
Derek
@derekkite

@vinzandtonz

switchMap((quiz) => this.quizDataService.postQuiz(quiz).pipe(
      tap((quizId) => console.log('NEED THE ACTION PAYLOAD HERE')),
      map((quizId:number) => quizActions.addQuizSuccess({quiz:{ id:quizId }})),
      catchError(() => EMPTY)

pipe off the api call. This will also deal with errors better; observables terminate on error and you don't want to terminate the action observable on error.

Stephen Adams
@Stephenradams

Hi, I'm trying to see if I can write a test that will check that the dispatch() method of the Store has been called. With the MockStore, can you check to see if the dispatch() method has been called? I'm setting the mock store like this:

const initialState = { mockAssessment };

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        provideMockActions(() => actions$),
        provideMockStore({initialState})
      ]
    });

    store = TestBed.get(MockStore);
    mockTestAssessment = mockAssessment;

    editorService = TestBed.get(EditorService);


  });

And then my test looks like this:

it('should dispatch a new Action', () => {
      spyOn(store, 'dispatch');
      const mockContentToSave: EditorContent = {
        guid: '1-12321123',
        action: {
          name: 'insertWithin',
          guid: '1-12321123'
        },
        content: '<p>This is mock data</p>',
        belongsTo: {
          guid: '1-12321234234',
          name: 'mockParent'
        },
        tag: '<div></div>'
      };

      editorService.saveContent(mockContentToSave);

      expect(store.dispatch).toHaveBeenCalled();
    });

But I keep getting No provider for MockStore!
Following the official docs I believe I've set the mock store up correctly.

Bomb Squad
@iamdjaebo_gitlab
Hi Everyone.
I need some help.
Why am I getting this error
TypeError: Cannot read property 'entities' of undefined
    at selectEntities
I need to get some entities before initializing the feature Module.
Jerry
@JTrembl1
This message was deleted
RoboZoom
@RoboZoom
@iamdjaebo_gitlab - it looks like state that your selector is trying to use doesn't exist yet... If you haven't created the entities, then selecting the entities will fail
Pedro Marins
@rickwalking
Hey everybody, a selector return a new object every time it has value changes?
RoboZoom
@RoboZoom
@rickwalking - A selector is an observable of the store... so whenever the store changes, the selector will pipe the updated value through
Pedro Marins
@rickwalking
But If i'm using a selector and adding it at component level as an Observable variable, using it with async pipe and my component has OnPush change detection strategy. Theses changes are received as a new Observable object every time stored value is updated?
Because my component is suffering from issues with change detection
RoboZoom
@RoboZoom
@rickwalking - The observable will only reflect the value of the store. The only way to update the store is via Actions -> Reducer.
So each time you dispatch an action, which will be handled by a reducer to modify the store, the observable will emit a new value reflecting the new store state that you've defined by the selector
You should not be receiving new observable objects each time an action takes place
the same observable object will be emitting a new value each time the store is changed
If you don't dispatch an action to update the store, then the observable will not emit a new value
Pedro Marins
@rickwalking
I'm dispatching an Action, but the updates are not reflected in the view. ngOnChanges isn't firing just DoCheck
The most curious thing is if I subscribe to that same Observable on my component and use a local variable to receive it's values, and manually trigger changeDetection.detectChanges() everything works fine.
When I'm dispatching an action, i'm changing the store with new values to an object already stored in my Entities.
RoboZoom
@RoboZoom
@rickwalking - can you provide a code sample?
You're saying your use of the Async Pipe isn't triggering ngOnChanges?
Kevin Taleb Dehkordi
@kebabCase_twitter
Hey guys,
I've got an error on AOT compilation :
ERROR in src/app/my-feature/my-feature.module.ts(71,53): Error during template compile of 'MyFeatureModule'
Expression form not supported in 'reducers'
   'reducers' contains the error at src/app/my-feature/store/reducers/index.ts(18,3).
Here is the reducer/index.ts
import * as fromChoice from './choice.reducer';
import * as fromCreditsDeclaration from './credits-declaration.reducer';

import { ActionReducerMap, createFeatureSelector } from '@ngrx/store';

export const featureKey = 'my-feature';

export interface FeatureState {
  [fromChoice.featureKey]: fromChoice.State;
  [fromCreditsDeclaration.featureKey]: fromCreditsDeclaration.State;
}

export const reducers: ActionReducerMap<FeatureState> = {
  [fromChoice.featureKey]: fromChoice.reducer,
  [fromCreditsDeclaration.featureKey]: fromCreditsDeclaration.reducer
};

export const getFeatureState = createFeatureSelector<FeatureState>(featureKey);
And the module :
import * as fromReducers from '../store/reducers';


@NgModule({
  declarations: [MyFeatureComponent],
  imports: [
    StoreModule.forFeature(fromReducers.featureKey, fromReducers.reducers),
    EffectsModule.forFeature(Effects),
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class MyFeatureModule {}

What is wrong here ? :(

thanks!

Kevin Taleb Dehkordi
@kebabCase_twitter

Ok I found the problem.

export const reducers: ActionReducerMap<FeatureState> = {
  [fromChoice.featureKey]: fromChoice.reducer,
  [fromCreditsDeclaration.featureKey]: fromCreditsDeclaration.reducer
};

This doesn't work with AOT Compilation.

We should use combineReducers


export function reducers(state: FeatureState | undefined, action: Action) {
  return combineReducers({
    [fromChoice.featureKey]: fromChoice.reducer,
    [fromCreditsDeclaration.featureKey]: fromCreditsDeclaration.reducer
  })(state, action);
}
Derek
@derekkite
@kebabCase_twitter that is strange, I pass actionreducermaps to the StoreModule without issue. It may be the barrel, index.ts that is causing the issue.
Kim Biesbjerg
@biesbjerg
It seems that my on() reducers are not type-safe (I can return state with non-existent keys) - is it supposed to be like that, or am I doing something wrong?
export const reducer = createReducer(
    initialState,
    on(PlayerEngineActions.stateChange, (state, { state: playerState }) => ({
        ...state,
        playerStateWithTypeInKey: playerState
    })),
I need to tack on :State to hint about the function's return value to make it complain, but I don't see that done in examples or in the wild
Using typescript 3.8.3 btw
Kim Biesbjerg
@biesbjerg
Huh, seems its an old issue rooted in TypeScript: https://github.com/microsoft/TypeScript/issues/241#issuecomment-540162369