NgRx killed my productivity. So I built a replacement in 3KB.

// The whole counter. Yes, the whole thing.
import { createStore } from '@ngstato/core'

const counterStore = createStore({
  count: 0,

  computed: {
    doubled: (s) => s.count * 2
  },

  actions: {
    increment(state) { state.count++ },
    decrement(state) { state.count-- },
    reset(state)     { state.count = 0 }
  }
})

// ❌ NgRx — you need this ritual every time
loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUsers),
    switchMap(() =>
      this.userService.getAll().pipe(
        map(users => loadUsersSuccess({ users })),
        catchError(err => of(loadUsersFailure({ error: err.message })))
      )
    )
  )
)

// ✅ ngStato — it's just JavaScript
actions: {
  async loadUsers(state) {
    state.loading = true
    state.error = null
    try {
      state.users = await http.get('/users')
    } catch (e) {
      state.error = e.message
    } finally {
      state.loading = false
    }
  }
}

import { exclusive, queued, retryable, optimistic } from '@ngstato/core'

actions: {
  // ⚡ Like switchMap — cancels the previous call
  search: exclusive(async (state, query: string) => {
    state.results = await http.get(`/search?q=${query}`)
  }),

  // 📋 Like concatMap — queues every call
  saveNote: queued(async (state, note: Note) => {
    await http.post('/notes', note)
    state.notes.push(note)
  }),

  // 🔁 Auto-retry with exponential backoff
  syncData: retryable(async (state) => {
    state.data = await http.get('/sync')
  }, { attempts: 3, delay: 1000, backoff: 'exponential' }),

  // ✨ Optimistic UI + automatic rollback on error
  deleteItem: optimistic(
    (state, id: number) => {
      state.items = state.items.filter(i => i.id !== id) // runs instantly
    },
    async (_, id) => {
      await http.delete(`/items/${id}`) // server call, rollback if it fails
    }
  )
}

const store = createStore({
  todos: [] as Todo[],
  filter: 'all' as 'all' | 'active' | 'done',

  // These are automatically memoized — recompute only when deps change
  computed: {
    activeTodos:    (s) => s.todos.filter(t => !t.done),
    completedTodos: (s) => s.todos.filter(t => t.done),
    progress:       (s) => s.todos.length 
                           ? Math.round((s.todos.filter(t => t.done).length / s.todos.length) * 100) 
                           : 0,
    filteredTodos:  (s) => {
      if (s.filter === 'active')    return s.todos.filter(t => !t.done)
      if (s.filter === 'done')      return s.todos.filter(t => t.done)
      return s.todos
    }
  }
})

// NgRx — setup ceremony before every test
beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [
      StoreModule.forRoot(reducers),
      EffectsModule.forRoot([UserEffects])
    ],
    providers: [
      provideMockStore({ initialState }),
      provideMockActions(() => actions$),
    ]
  })
  store = TestBed.inject(Store)
  actions$ = TestBed.inject(Actions)
})

// ngStato — one line
const store = createMockStore(UsersStore, {
  users: [{ id: 1, name: 'Alice' }],
  loading: false,
})

// Then just test actions and state
it('should mark user as admin', async () => {
  await store.makeAdmin(1)
  expect(store.users()[0].isAdmin).toBe(true)
})

<!-- Add to your app.component.html -->
<stato-devtools />

import { createEntityAdapter } from '@ngstato/core'

type User = { id: number; name: string; email: string }

const adapter = createEntityAdapter<User>({ selectId: u => u.id })

const usersStore = createStore({
  ...adapter.getInitialState(), // { ids: [], entities: {} }
  loading: false,

  computed: {
    all:   (s) => adapter.selectAll(s),
    total: (s) => adapter.selectTotal(s),
    byId:  (s) => (id: number) => adapter.selectById(s, id),
  },

  actions: {
    async loadAll(state) {
      state.loading = true
      adapter.setAll(state, await http.get('/users'))
      state.loading = false
    },
    add(state, user: User)                    { adapter.addOne(state, user) },
    update(state, id: number, changes: Partial<User>) { 
      adapter.updateOne(state, { id, changes }) 
    },
    remove(state, id: number)                 { adapter.removeOne(state, id) },
  }
})

@Component({
  template: `
    <div *ngIf="store.loading()">Loading...</div>
    <ul>
      @for (user of store.all(); track user.id) {
        <li>{{ user.name }} ({{ store.byId()(user.id)?.email }})</li>
      }
    </ul>
    <p>Total: {{ store.total() }}</p>
  `
})
export class UsersComponent {
  store = injectStore(UsersStore)

  // Everything is a Signal — no subscribe, no async pipe, no destroy$
  ngOnInit() {
    this.store.loadAll() // fire and forget
  }
}

// NgRx BEFORE
// 4 files: actions + reducer + effects + selectors

// @ngrx/store dispatch
this.store.dispatch(loadUsers())
// select
this.users$ = this.store.select(selectAllUsers)

// ngStato AFTER
// 1 file: users.store.ts

// Direct call
await this.store.loadUsers()
// Signal
this.users = this.store.users // Signal<User[]>

npm install @ngstato/core @ngstato/angular

// app.config.ts
import { provideNgStato } from '@ngstato/angular'

export const appConfig = {
  providers: [
    provideNgStato({ devtools: true })
  ]
}

// feature.store.ts
import { createStore } from '@ngstato/core'
import { StatoStore, connectDevTools } from '@ngstato/angular'
import { isDevMode } from '@angular/core'

function createFeatureStore() {
  const store = createStore({
    items: [] as Item[],
    loading: false,

    actions: {
      async load(state) {
        state.loading = true
        state.items = await http.get('/items')
        state.loading = false
      }
    }
  })

  if (isDevMode()) connectDevTools(store, 'FeatureStore')
  return store
}

export const FeatureStore = StatoStore(() => createFeatureStore())