Welcome to elf Discussions!

[NetanelBasal]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[nayfin]

Hello I'm a long time Akita user. I'm trying to decide if/when I need to convert to Elf.

• Is Akita losing support/love?
• Does elf have features Akita is lacking?
• Will conversion be straightforward?

[nayfin]

I did find a little info in the FAQ. It would be great to get a little more information to help make conversion decisions: good use cases, bad use cases, benefits of one over the other, conversions tips in addition to the question asked above. Thanks a lot!

[NetanelBasal]

Thanks for reaching out to me.

Akita has peaked. However, I'll still support Akita, so you have nothing to worry about.
There are two reasons why I couldn't change Akita:

1. It's heavily used in Datorama, and the code base will not be changed.
2. All the features I wanted to implement would have broken the consumer applications.

Elf has a lot to offer:

1. Tree shaking
2. Better Typescript support
3. Multiple entities state in the same store
4. Faster
5. Smaller
6. Composable
7. Extendable

And many more!

As one example, we have a brand new mutation named - addEntitiesFifo({ limit: 100 }). Because it's now tree-shakable, we can have as many as we wish.

Akita has the advantage of currently having a more significant user base and being a more mature solution. Overall, I'd go with Elf.

If your application isn't complicated, the migration process should be relatively straightforward. Try using it along with Akita first. Consider turning an existing store into Elf, and see how it goes.

Please let me know if you have any further questions.

[nayfin]

Thanks for the quick response. I'm sure I'll be converting soon. I'll post conversion story here after I finish. Thanks for all the great libraries and articles!!

[SMFloris]

Guess we'll be migrating to Elf real soon. Thanks for all the great work! Using Akita is a pleasure so I'm sure that Elf will be easy and pleasurable to use as well.

[Rush]

@nayfin how did it go?

[PeterHewat]

This is excellent news. I was just about to start using Akita for an Angular app so might as well go with Elf instead.

I see you support React. Do you have any plans in supporting Vue as well ? If so, how would it compare to Vuex or Pinia ?

[NetanelBasal]

I think Vuex is a better option for Vue. The core team also maintains it.

[NetanelBasal]

You can always use Elf with libraries such as https://github.com/vuejs/vue-rx

[jaytonic]

I'm curious, is there some integration planned with services like firebase?

Often with firebase you feel that you don't really need a state management library, but then you miss the ease of use of selector function and you still have some informations that are not stored in firebase.

[NetanelBasal]

Maybe in the future, we'll add something like https://github.com/dappsnation/akita-ng-fire

[alexis-mrc]

I would like to migrate my application using Akita and akita-ng-fire to elf.
Did you started working on something like akita-ng-fire ? or did you planed it ? or it's still "maybe in the future" ?

Thank you for the hard work !

[NetanelBasal]

There are no plans right now to add a similar library. I don't think you need it. You can create a minimal implementation in your application.

[petterhoel]

Hi, I am involved in a couple of projects that recently started using Akita. Seeing this I want to plan our transition to elf. I have two questions:

1. Are you able to give a ballpark timeframe for a v1?
2. We have devs of all levels, are you planning more extensive docs focusing on Angular usecases?

Thank you for your always awesome blogposts and npm packages :D

[NetanelBasal]

1. It's ready to go. Now I need to find the time to release it.
2. I don't think it's necessary if you're familiar with Akita, but I wouldn't mind adding more examples in Angular.

[petterhoel]

Awesome, thanks. We have a mix from none to some experience with Akita so we should be fine for the basics. Some examples showing off more advanced scenarios such as multiple entities in same store with request status for each etc is something we would love to see.

[NetanelBasal]

Sure, feel free to open a discussion and I'll answer your questions.

[m-risto]

Our company is also waiting for the v1 release. Thank you for your support. Can't wait to switch.

[NetanelBasal]

@petterhoel @mristo Elf is now stable.

[boris-jenicek]

Hi,

Does the Elf have all features that the Akita has?
And is the Efl fork of the Akita?

[NetanelBasal]

• Not all, but most of them.
• No

[uahic]

Is Akita or Elf able to represent graph datastructures properly? You said that Elf can have multiple different entity states, that sounds it may be possible to do that in one store

[NetanelBasal]

Yep. You can try https://ngneat.github.io/elf/docs/features/entities/entities-props-factory

[uahic]

@NetanelBasal I really do like the slim and modular new API. great work!

[quincarter]

You mention that akita can work in web components. Can akita or elf be installed and used inside of a project using a base class like Lit Element with no framework in place?

[quincarter]

We use it at work to build out component libraries and MFEs to separate some functionality from Angular to make it more framework agnostic. I am also working on an application in Lit on the side and was wondering more for myself.

[NetanelBasal]

The main issue with lit ( and shadow dom ) is that you can't use a global CSS. It's annoying.

[quincarter]

Yep. I have found i have to convert my CSS to lit css and import it into the css array on my component. But you can't do the css @import because it isn't supported in Constructible Stylesheets. It is very annoying right now until we can figure out how to do that with Constructible Stylesheets

[danielquintero]

@NetanelBasal would be amazing if you could show some gist on how to plug elf into lit, currently I am trying to have effects working but they are not getting triggered on dispatch of an action.. so not sure what am I doing wrong here. We have a Lit and Hilla router app.

Here snippet for Illustration:

routes

const routes: Route[] = [
  {
    path: '/',
    component: 'app',
    children: [
      {
        path: '',
        component: 'test-view',
        action: async () => {
          await import('./state/calendars/effects'); <= Registering effects
          await import('./test-view');
        },
      },
    ...

test-view

...
  connectedCallback(): void {
    super.connectedCallback();
    dispatch(loadCalendars()); <= dispatching action
  }
...

calendar-effects

export const loadCalendarsEffect$ = createEffect(actions =>
  actions.pipe(
    ofType(loadCalendars),
    switchMap(() => calendarsApi.loadCalendars()),
    tap(setCalendars),
    tap((calendars: Calendar[]) => console.log('calendars', calendars))
  )
);

any tips would be greatly appreciated! Thank you.

[danielquintero]

Apologies, after carefully reading the react Effect docs I saw I missed to initEffects(); and later on registerEffects([MyEffects$]); not it is all working 😻

[bifty]

Hello! I am migrating from akita to elf.
Is there a way to get filtered entities of the store in elf as no Observables?

Returning filtered entities as observable in elf:
store.pipe(selectManyByPredicate((entity) => entity.id === target.id ))

As value in elf:
store.query(getEntities())
-> how to filter here? There is an {option} possible but don't know how it can be used as predicate to filter.

In akita i did:
query.getAll({ filterBy: (entity:MyEntity) => entity.id === target.id });

But i don't see how i can use a filter or predicate in the getEntity / getEntities.
(My predicate is a bit more complex as shown in this example).

Would appreciate help, because it blocks the migration. Thx!

[NetanelBasal]

@bifty I've added a query function in v3.4.0:

https://ngneat.github.io/elf/docs/features/entities/entities/#getallentitiesapply

[bifty]

Thank you for the quick integration! That`s what i need!
But i think you forgot to export it in the index file it is no exported member -> not usable! Can you fix it?
Big thank for your good and quick work!
After the migration i could clean up a lot of code.

[NetanelBasal]

v4.0.1

[bifty]

I can not compile because of the following error with the request module:
./node_modules/@ngneat/elf-requests/index.esm.js:15:0-23 - Error: export 'distinctUntilKeyChanged' (imported as 'distinctUntilKeyChanged') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrame, animationFrameScheduler, asap, asapScheduler, async, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queue, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

i use

"@ngneat/elf": "^1.4.0", "@ngneat/elf-cli-ng": "^1.0.0", "@ngneat/elf-devtools": "^1.2.0", "@ngneat/elf-entities": "^3.4.0", "@ngneat/elf-requests": "^1.1.2",
and
"rxjs": "^6.6.7",

Is this a bug or do i something wrong?
I already cleaned my node_modules directory.

[NetanelBasal]

"@ngneat/elf-entities": "4.0.1"

[bifty]

same error with 4.0.1

[bifty]

the problem is with elf-requests

[bifty]

i created issue #186

[bifty]

[NetanelBasal]

@bifty please open your questions in a dedicated discussion so that others can benefit from the answer. Moreover, please format the content.

[dezmon-fernandez]

Hi,

I'm wondering what your recommendation is for asynchronous store updates. Is effects recommended over services? One thing I struggle with is finding good patterns. IE in an angular context, should a component inject both the repo for data access and a separate service which fuels the store based on api requests? I have not seen a lot of patterns around effects or just a standardized way of handling this.

Thank you for your time

[NetanelBasal]

https://ngneat.github.io/elf/docs/side-effects

[StuckInSprings]

Hi, love your work with Akita, Elf looks great. Thanks for building these great tools for the community. My question is, if my team and I are working on a new project would you recommend Elf over Akita? Would starting a new project with Akita disadvantage us in some way? Would using Elf advantage us?

[NetanelBasal]

#5 (reply in thread)

[NetanelBasal]

Today, my answer is - to use Elf.

[StuckInSprings]

Thanks so much, @NetanelBasal for your reply. I appreciate the care you take as a maintainer and being responsive in this community. Is Akita (now that Datorama has been acquired by Salesforce) going to be under new maintainership or it's going to be in maintenance mode for the foreseeable future?

[NetanelBasal]

The latter

[StuckInSprings]

Thank you. My team is currently using Akita for our state solution. As such we have reactive design patterns that would be a pain to convert to something like Redux. I can see the move to Elf won't be painful though.

[beckmx]

Hello, I was wondering about the documentation for Akita, my team and I have several projects built with akita and some members are new to the projects, and I noticed the documentation is not available anymore, is it possible to have the docs available somewhere?

[NetanelBasal]

Oh, that's because of the move to salesforce org. I'll take care of that.

[NetanelBasal]

https://salesforce.github.io/akita/

[quincarter]

Thanks! I was literally about to message here!

[mhamri]

how do you compare it with rx-angular? I was going through the documentation and saw both offer similar features and could achieve same thing in one way or another. what's your thought?

[NetanelBasal]

Elf has more to offer, rx angular state does not provide the same features. Read the docs, please. Moreover, Elf is framework agnostic.

[zubko]

Hi Netanel and the community.

My name is Alex. I do React / React Native frontend development for living and as a hobby :)

I was a big fan Redux & Redux Saga years ago, but now I look for more modular and less verbose solutions, kinda back to Flux modularity, but ideally with something that is not internally based on React (compared to Recoil for example), so the business logic can be independent of implementation details of the View layer of the app.

I like how the API of Elf looks like and that it is based on RxJS for reactivity. I'm experimenting with it on a small hobby project for now to understand better the use cases.

I don't have huge participation plans, as I'm still checking it out, but I start to have some questions or suggestions :)

[NetanelBasal]

Cool. I recommend checking the ngneat/effects package to manage side effects. I'm here for any questions or suggestions.

[Nanges]

Hi Netanel and the community,

I'm currently checking Elf and the cache system. What's the meaning of value ('none', 'partial' or 'full') used in the cache operators ? Is there a specific behavior depending on this value or is just for informative purpose ?

Great work btw, I will implement it in our angular projects.

[NetanelBasal]

Yes, informative purpose.

[hassanrazakhalid]

Hi One question if i have following structure. Rooms has many participants and many messages. Message can have one participant.
If i want to normalized structure. How i can achieve this . I saw documentation
https://ngneat.github.io/elf/docs/features/entities-management/entities-props-factory
But i am unable to figure this out by reading docs. Also if want to have inverse relation like Participant to Room and Room to participants and message to participant and participant to message.

const { participantEntitiesRef, withParticipantEntities } =
  entitiesPropsFactory('participant');
const { messageEntitiesRef, withMessageEntities } =
  entitiesPropsFactory('message');

interface Participant {
  id: string;
  name: string;
}

interface Message {
  id: string;
  text: string;
  sender: Participant['id];
}

interface Room {
  id: string;
  name: string;
  participants: Array<Participant['id']>;
  messages: Array<Message>;
}

const productsStore = createStore(
  { name: 'rooms' },
  withEntities<Room>(),
  withParticipantEntities<Participant>(),
  withMessageEntities<Message>()
);

[danielquintero]

@NetanelBasal I have a Lit-html project where I took your AsyncController and subscribe directive from here to make my components react to rxjs changes and I am also using Elf for state management. Do you have any suggestions in order to group VM data? So far I came up with grouping selectors in a combineLatest e.g.

  private readonly observableData$ = combineLatest({
    nettingCalendars: nettingCalendars$,
    activeNettingCalendar: activeNettingCalendar$,
    globalCompanySettings: globalCompanySettings$,
    filters: transactionsFilters$,
    filterQueryParams: transactionsFilterQueryParams$,
    globalCompanyID: globalCompanyID$,
    companySearchTerm: companySearchTerm$,
    transactionsCompanyTypes: transactionsCompanyTypes$,
  });
  private vm = new AsyncController(this, this.observableData$);

NOTE: trying to achieve something like this

[NetanelBasal]

LGTM