nested stores

[elpddev]

Coming from Angular hierarchical services and React contexts, how do I implement a nested state architecture?

Usecase

An online board where the user can drag components on the board and recursively - meaning components inside components.

Other State Management Solutions

• In React, using contexts, a context is generated at the level of its provider in the components tree.
• In Angular, using components providers, a service is generated at the level of its provider declaration in the component which is in the components tree also.

React:

<UsersProvider>
  <UsersDashboard />
</UsersProvider>

Angular:

@Component({
  …
  providers: [UsesService]
})
export class AppComponent

In both frameworks, hierarchical services and context can be injected into lower components in the tree by:

• React - useContext
• Angular - constructor service injection

React

function UsersDashboard() {
  const usersStore = useContext(UsersContext);
  // ...
}

Angular

@Component({})
export class UsersDashboardComponent {
  constructor(private usersService: UsersService) {}
}

In both frameworks, the injected service/context can be overridden by a child by:

• React - create a child provider for the same context
• Angular - declare a new service provider for the same token in the child component

Elf

I have looked at the docs and the apps examples, but did not find something that shows how to achieve similar functionality.

For now, I saw examples of singleton root states:

1. The stores are created inside a js module import flow. Meaning they are created only once per all imports
2. The store creation is registering the store in a global state for global subscriptions mainly used for devtool if I understand correctly.

Thank you. Any help will be appreciated

[NetanelBasal]

Is this what you're looking for?

#17

[elpddev]

Thank you for the fast reply. Much appreciated.

If I understand correctly from the attached issue, it is enough to use createStore with a unique name - ex using guid?

In Angular:

@Injectable()
export class ItemRepository implements OnDestroy {
  private readonly store;

  constructor() {
     this.store =  createStore(
       { 
          name: 'item' + generateGuid() 
       },
        withProps<{ foo: string }>({ foo: '' })
      );
  }
  
  ngOnDestroy(): void {
    this.store.destroy();
  }
}

@Component({
  selector: 'item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css'],
  providers: [ItemRepository],
})
export class ItemComponent {}

[NetanelBasal]

Yes