Dispatchable

Dispatchable reactive store, alternative to svelte stores

Installation

Install svelte-dispatchable with npm

npm install svelte-dispatchable

Install svelte-dispatchable with yarn

yarn add svelte-dispatchable

Usage/Examples

// counterStore.js

import { dispatchable } from 'svelte-dispatchable'

export const counter = dispatchable(0, (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
})

Import the store in svelte component

<script>
  import { counter } from './counterStore';

  const increment = () => {
    counter.dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    counter.dispatch({ type: 'DECREMENT' });
  };

  const reset = () => {
    counter.dispatch({ type: 'RESET' });
  };
</script>

<div>
  <h1>Counter</h1>
  <p>
    <button name="increment" on:click={increment}>+</button>
    <span class="counter">{$counter}</span>
    <button name="decrement" on:click={decrement}>-</button>
    <button name="reset" on:click={reset}>reset</button>
  </p>
</div>

The Store

Dispatchable takes initialState as first argument and reducer function as second argument.

const reducer = (state, action) => {
  // handle state
  return state
}

const store = dispatchable(0 /* <initialState> */, reducer /* <reducerFn> */)

Dispatch update to the store

Dispatch method takes first argument as object { type: string }, type key is required

store.dispatch({
  type: 'string',
})

Dispatch update to the store with additional data

store.dispatch({
  type: 'string',
  value: 1,
  // ...other data
})

Dispatch update with additional arguments

store.dispatch({ type: 'string' }, ...additionalArgs)

FAQ

Why are the issue with svelte stores?

• Svelte allows to directly modify the store value from components which sometime becomes very hard to find which component is updating the store. Multiple updates on store from multiple places.

$counter = 10;

• It is not a scalable approach as your project grows it becomes difficult to manage the state.
• To solve these issue introducing dispatchable store.

Why not redux?

Redux is a very popular state management library mostly used with React framework. Redux mainly focus on creating a single store and adding reducers based on requirement. And redux also has so much boilerplate code to setup a reducer. Which defeats the purpose of writing multiple independent stores with very less boilerplate code in svelte.

Authors

• @ravid7000

License

MIT

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.