joaopaulolousada / ngx-zustand Goto Github PK

import { Injectable } from '@angular/core';


interface CounterState {
  counter: number;
  increment: () => void;
  // decrement: () => void;
}

@Injectable({
  providedIn: 'root',
})
export class CounterService extends ZustandBaseService<CounterState> {
  initStore() {
    return set => ({
      counter: 0,
      increment: counter => set({ counter }),
      // decrement: () => set(state => ({ counter: state.counter - 1 })),
    });
  }
}

I did something like that , but it's throwing an error like Cannot find name 'ZustandBaseService'.ts(2304) so from where I can import it??

I don't understand why these errors appear with the library, can someone help me. thank you

Information:
"typescript": "~4.0.2"
Angular CLI: 11.0.7
Node: 14.19.1
OS: linux x64

the errors:

Build at: 2023-11-09T12:49:24.967Z - Hash: f7bcd2d370c48f38868f - Time: 7962ms

Error: node_modules/ngx-zustand/lib/zustand-base.service.d.ts:13:53 - error TS1005: '>' expected.

13 useStore(selector: Parameters<typeof useStore<T, S>>[1]): Observable;
~
node_modules/ngx-zustand/lib/zustand-base.service.d.ts:13:58 - error TS1005: ',' expected.

According to the code example, you have to create the store inside the Service.

Is it possible to expose the store created this way as a vanilla store. Or else allow me to create a vanilla store first outside of Angular, then import it into the Angular Service.

Example:

import { createStore } from 'zustand/vanilla'

const store = createStore((set) => ({
  counter: 0,
  increment: () => set((state) => ({ counter: state.counter + 1 })),
  decrement: () => set((state) => ({ counter: state.counter - 1 })),
});)

interface CounterState {
  counter: number;
  increment: () => void;
  decrement: () => void;
}

@Injectable({
  providedIn: 'root',
})
export class CounterService extends ZustandBaseService<CounterState> {
  initStore() {
    return store
  }
}

I am fairly new to Angular, so I do appreciate if you could point me to a better way. My intention is to use Zustand (the vanilla store specifically) to interface between Angular app with a separate non-angular system.

The React adapter allows this via the create function

import { create } from 'zustand'
import { vanillaStore } from './vanillaStore'

const useStore = create(vanillaStore)