https://github.com/endenwer/svelte-restate

Immutable store for Svelte with full Typescript support and Redux Devtools integration.
https://github.com/endenwer/svelte-restate

redux-devtools state-management store svelte

Last synced: 17 days ago
JSON representation

Immutable store for Svelte with full Typescript support and Redux Devtools integration.

• Host: GitHub
• URL: https://github.com/endenwer/svelte-restate
• Owner: endenwer
• License: mit
• Created: 2021-03-31T11:31:07.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-02-15T16:35:02.000Z (almost 3 years ago)
• Last Synced: 2024-11-15T04:31:05.589Z (28 days ago)
• Topics: redux-devtools, state-management, store, svelte
• Language: TypeScript
• Homepage: https://endenwer.github.io/svelte-restate/
• Size: 230 KB
• Stars: 21
• Watchers: 5
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte-stores - svelte-restate

README

        
## Svelte Restate

Immutable store for Svelte with full Typescript support and Redux Devtools integration. It is highly inspired by [re-frame](https://github.com/day8/re-frame) subscriptions(read more about signal graph and subscription layers [here](https://day8.github.io/re-frame/subscriptions/)). [Immer](https://immerjs.github.io/immer/) is used to work with immutable state.



## Install

```sh

npm i svelte-restate --save

```



## Usage [[Demo]](https://svelte-restate-example.netlify.app/)

Create store with initial state.

```ts

import { createStore } from 'svelte-restate'

export interface State {

  isLoading

  todos: {

    id: number

    completed: boolean

    description: string

  }[]

}

const initState: State = {

  isLoading: true,

  todos: []

}

export default createStore(initState)

```

Create subscriptions. See more examples in documentation for [`RegRootsub`](/docs/API.md#reg-root-sub) and [`RegSub`](/docs/API.md#reg-sub).

```ts

import store from './store'

// register root subs

const isLoading = store.regRootSub(

  'isLoading',

  ($root) => $root.count

)

const todos = store.regRootSub(

  'todos',

  ($root) => $root.todos

)

// use root subs to register derived subs

const completedTodos = store.regSub(

  'completedTodos',

  () => todos()

  ($todos) => $todos.filter(todo => todo.completed)

)

// register sub with arguments

const todo = store.regSub(

  'todo',

  () => todos()

  ($todos, [id]: [number]) => $todos.find(todo => todo.id === id)

)

export default { count }

```

Create mutations. See more examples in documentation for [`RegMut`](/docs/API.md#reg-mut).

```ts

import store from './store'

const setLoading = store.regMut(

  'setLoading',

  (draft, value) => draft.isLoading = value

)

const insertTodos = store.RegMut(

  'insertTodos',

  (draft, todos) => draft.todos = todos

)

export default { setLoading, insertTodos }

```

Use in svelte component.

```html

  import muts from './muts'

  import subs from './subs'

  import store from './store'

  import { onMount } 'svelete'

  import { fetchTodos } './api'

  // subscription without arguments.

  // To get the value use '$isLoading'

  const isLoading = subs.isLoading()

  // subscription with arguments

  export let id: number

  $: todo = subs.todo(id)

  // use mutations

  onMount(async () => {

   muts.setLoading(true)

   const todos = await fetchTodos()

   // call multiple mutations within transaction

   store.transaction(tx => [

     muts.setIsLoading(false, tx),

     muts.insertTodos(todos, tx)

   ])

  })

{# if $isLoading}

  
Loading...

{:else}

  
{$todo.description}

{/if}

```


Connect to Redux devtools. You can see main state, state of all active subscriptions and dispatch mutations directly from the devtools. Time travel also works. See documentation for [`connectToDevtools`](/docs/API.md#connect-to-devtools).

```ts

import muts from './muts'

import store from './store'

connectToDevTools(store, muts)

```