ngrx/signals, How to intialize entity state from a global store in a component store

[maxiuser1]

How to implement combine selector but in ngrx/signals,
I have a global store that has an array, this array is fetched from a service,
In the other hand, I have a child store using entity management, I need to initialize the child store with the feched data, how can i do that?

[rainerhahnekamp]

As in the global store, you cannot initialize the store with values from a request. Instead, you would initialize the state with an empty array.

Your global store fetches the data asynchronously via an effect. In that effect, you can inject your SignalStore instance and then call the method that sets the entities.

Something like

@Injectable()
export class GlobalStoreEffect {
  readonly #actions = inject(Actions);
  readonly #loadService = inject(LoadService);
  readonly #store = inject(MySignalStore);

  loadData$ = effect(() => { 
    returnthis.#actions.pipe(
      ofType(someAction.load), 
      switchMap(() => loadService.load()), 
      tap(data => this.#store.setData(data)), 
      map(data => someAction.loaded(data)))
    }))
}

[maxiuser1]

Both stores are signals, the global store is for the blogpost, and the child store is for the comments.
In the blogpost component I read the route and fetch the blogpost payload including comments, so I need to comunicate that comments to the child store "CommentsStore" that implements Entity Management, I found a solution but it requires allowSignalWrites and don't like it.

  ngOnInit(): void {
    effect(() => {
      const blogPost = this.globalStore.blogPost();
      if (blogPost) {
        this.commentsStore.init(blogPost.comments);
      }
    }, { allowSignalWrites:true })
  }

[rainerhahnekamp]

Ok, but then it should be easy.

const GlobalStore = signalStore(withState({blog: blog}))

const CommentStore = signalStore(
  withMethods(store => ({
    sync: rxMethod<Comment[]>(pipe(tap(comments => patchState(store, {comments}))
  })),
  withHooks(store => ({
    const globalStore = inject(GlobalStore);
    onInit() {
      store.sync(globalStore.blog.comments);
    }
  })
)

[maxiuser1]

Even if I pass a signal to sync the init hook is executed only one, no matter i navigate to a diferent url

withHooks((store) => {
        const globalStore = inject(BlogStore);
        return {
          onInit() {
            store.sync(globalStore.comments);
          }
        };
    })

[rainerhahnekamp]

Do you have this project somewhere on a GitHub repo? IDX doesn't show me the console.

[maxiuser1]

Suire, here is https://github.com/maxiuser1/signalsdemo1

[rainerhahnekamp]

Pushed the fix as PR. I think we can close discussion here?

[maxiuser1]

sure, thanks a lot