52% less code: RxAngular vs StateAdapt 2. Angular Movies 3. Account Menu
Tags: angular, stateadapt, rxangular
Published: 2022-10-31 06:34:28

---
title: 52% less code: RxAngular vs StateAdapt 2. Angular Movies 3. Account Menu
published: true
description: 
tags: angular,stateadapt,rxangular
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dosem8zswszhracpua78.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-24 05:27 +0000
series: RxAngular vs StateAdapt
---

[YouTube video for this article](https://www.youtube.com/watch?v=m07HFeFq2T8)

I implemented the Account Menu in Angular Movies with [StateAdapt](https://github.com/state-adapt/state-adapt) and the code decreased by 52%. 

![Angular Movies Account Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26izneu4yeotu7273son.png)

## Nested state again

As in the last feature, RxAngular had a state shape like `{ loggedIn: boolean }`, whereas StateAdapt only needed a boolean.

## Effects?

However, what really made a difference was removing unnecessary side-effects. RxAngular had these:

```tsx
    this.effects.register(this.ui.signOut$, this.authEffects.signOut);
    this.effects.register(
      this.ui.signIn$,
      this.authEffects.approveRequestToken
    );
```

So the template was calling `ui.signOut$.next($event)` and `ui.signIn$.next($event)`, when it could have just been calling `authEffects.signOut` and `authEffects.approveRequestToken` directly. I did end up creating pass-through class properties, because most Angular devs get a little uncomfortable with templates directly referencing services. But that was just 2 lines of code in my StateAdapt version: 

```tsx
  signOut = this.authEffects.signOut;
  signIn = this.authEffects.approveRequestToken;
```

It also allowed me to delete this from the RxAngular implementation:

```tsx
type Actions = {
  signOut: Event;
  signIn: Event;
};
```

## Imports, providers, constructor

RxAngular's implementation had more imports and providers, so the constructor was pretty fat. When I removed them, it collapsed from 

```tsx
  constructor(
    private authEffects: AuthEffects,
    private authState: AuthState,
    private state: RxState<{ loggedIn: boolean }>,
    private effects: RxEffects,
    private actionsF: RxActionFactory<Actions>
  ) {
```

to 

```tsx
constructor(private authEffects: AuthEffects, private authState: AuthState) {}
```

StateAdapt only had 2 imports: `adapt` and `booleanAdapter`. `adapt` needs a provider that is required once per app (since a global Redux-like store is created behind the scenes), so `adapt` needs to be injected. However, I like the `inject` function instead of providing things in the constructor. Especially for libraries. 

## Similarities

I love RxAngular's `connect` method. StateAdapt has something almost identical. Look at how this from RxAngular

```tsx
    this.state.connect(
      'loggedIn',
      this.authState.accountId$.pipe(map((s) => s !== null))
    );
```

changes to this in StateAdapt

```tsx
  accountIdTruthy$ = this.authState.accountId$.pipe(
    map((s) => s !== null),
    toSource('accountIdTruthy$')
  );

  loggedIn = adapt(['loggedIn', false, booleanAdapter], this.accountIdTruthy$);
```

When passed in like that, `this.accountIdTruthy$` will output to the `set` method of `booleanAdapter` (or whatever adapter is passed in). If there was a property like `isLoggedIn`, you could control it like `{ setIsLoggedIn: this.accountIdTruthy$ }`. 

RxAngular and StateAdapt are very similar to each other. They are the most reactive state management libraries that I know of for Angular. I wrote about this in a previous article: [Choosing a State Management Library for Progressive Reactivity in Angular](https://dev.to/this-is-angular/choosing-a-state-management-library-for-progressive-reactivity-in-angular-19j8).

## Conclusion

For a full comparison, see [the commit here](https://github.com/mfp22/angular-movies-state-adapt/commit/8fc9c839107600dc577d75fa23c64e557c021531). 

The features in Angular Movies will be getting more complex from here on. I expect RxAngular to be closer to StateAdapt in terms of code size. And while minimalism can be more readable, it is not the only metric to judge a library by. RxAngular is becoming very popular, the documentation is great, and in general has great support. That's why RxAngular is still currently my top pick for state management in Angular. [StateAdapt](https://github.com/state-adapt/state-adapt) is still a work in progress. I need to apply it to many more projects before I can have the confidence to release version 1.0. If you think it has potential, I'd appreciate a star, and I'd love for you to try it out and share your thoughts.

Thanks!

Edit: The Angular Movies app is a little buggy, so I'm going go on a detour and do a few conversions from NGXS and NgRx. But I'm looking forward to working inside RxAngular code again soon after that!

---

[Repo](https://github.com/mfp22/angular-movies-state-adapt/tree/state-adapt)

[StateAdapt](https://github.com/state-adapt/state-adapt)

[RxAngular](https://www.rx-angular.io/)

[Twitter](https://twitter.com/mfpears)