https://github.com/alibasiccoder/store-pro

a js library to easily mange state across multiple js frameworks
https://github.com/alibasiccoder/store-pro

Last synced: 20 days ago
JSON representation

a js library to easily mange state across multiple js frameworks

• Host: GitHub
• URL: https://github.com/alibasiccoder/store-pro
• Owner: AliBasicCoder
• License: mit
• Created: 2022-03-19T20:09:22.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-04-04T19:06:18.000Z (almost 3 years ago)
• Last Synced: 2024-12-28T00:35:27.882Z (about 2 months ago)
• Language: TypeScript
• Size: 1.2 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# store-pro

> store-pro allows you to handle state easily across multiple js frameworks (namely react, angular & svelte)

vue support coming soon

# example

## create the store

```ts

// store.ts

import { ReadableStore } from "store-pro";

export interface Todo {

  title: string;

  done: boolean;

  id: number;

}

// if you want update and set methods to be accessed outside

// the use "WritableStore" instead

class TodoStore extends ReadableStore {

  addTodo(todo: Todo) {

    this.update((state) => {

      // you don't need to create a new object every update

      state.push(todo);

      return state;

      // or...

      return [...state, todo];

    });

  }

  removeTodo(id: number) {

    this.update((state) => state.filter((todo) => todo.id !== id));

  }

}

export const todoStore = new TodoStore([]);

```

notice: you don't have to create dispatcher, actions, reducers or any of that stuff

## use the store (React)

to use any store-pro store use the `useStore` method from [store-pro-react](https://npmjs.com/package/store-pro-react)

```tsx

import { useStore } from "store-pro-react";

import { todoStore, Todo } from "./store";

export function App() {

  // no need to infer the type it's here for explaining

  const $todos: Todo[] = useStore(todoStore);

  return (

    <>

      {$todos.map((todo) => (

        <>

          
{todo.title}

           todoStore.removeTodo(todo.id)}>

            remove todo

          

        >

      ))}

    >

  );

}

```


## use the store (Angular)

in angular you could use the `BindStore` property decorator

from [store-pro-angular](https://npmjs.com/package/store-pro-angular)

as in the example bellow

```ts

// app.component.ts

import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";

import { BindStore } from "store-pro-angular";

import { todoStore, Todo } from "./store";

@Component({

  selector: "app-root",

  templateUrl: "./app.component.html",

  styleUrls: ["./app.component.css"],

})

export class AppComponent implements OnInit, OnDestroy {

  @BindStore(todoStore, true) $todos?: Todo[];

  // NOTE: technically you don't have to set this

  // changeDetector property, but angular will only react

  // to changes if an event is dispatched

  // (mouse event, keyboard event, rxjs store update, ...etc)

  // if this is ok with you please this "changeDetector" property

  // and remove the true in BindStore above

  // NOTE2: store-pro requires this property to be named

  // "changeDetector" and nothing else

  constructor(public changeDetector: ChangeDetectorRef) {}

  ngOnDestroy(): void {}

  ngOnInit(): void {}

  removeTodo(id: number) {

    todoStore.removeTodo(id);

  }

}

```

```html



  
{{ todo.title }}

  



```


## use the store (svelte)

in svelte you can use store-pro stores as if they're a normal

svelte store

```html

  import { todoStore, Todo } from "./store";

{$todoStore[0].title}

```


# License

MIT AliBasicCoder 2022 (c)