Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ravid7000/svelte-dispatchable
Svelte dispatch-able store, alternative to writable
https://github.com/ravid7000/svelte-dispatchable
Last synced: 5 days ago
JSON representation
Svelte dispatch-able store, alternative to writable
- Host: GitHub
- URL: https://github.com/ravid7000/svelte-dispatchable
- Owner: ravid7000
- License: mit
- Created: 2022-01-15T08:49:59.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-22T22:00:04.000Z (almost 3 years ago)
- Last Synced: 2024-04-25T01:20:47.439Z (7 months ago)
- Language: TypeScript
- Size: 244 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# Dispatchable
Dispatchable reactive store, alternative to svelte stores
## Installation
Install svelte-dispatchable with npm
```bash
npm install svelte-dispatchable
```
Install svelte-dispatchable with yarn
```bash
yarn add svelte-dispatchable
```
## Usage/Examples
```js
// 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
```svelte
import { counter } from './counterStore';
const increment = () => {
counter.dispatch({ type: 'INCREMENT' });
};
const decrement = () => {
counter.dispatch({ type: 'DECREMENT' });
};
const reset = () => {
counter.dispatch({ type: 'RESET' });
};
Counter
+
{$counter}
-
reset
```
### The Store
Dispatchable takes initialState as first argument and reducer function as second argument.
```js
const reducer = (state, action) => {
// handle state
return state
}
const store = dispatchable(0 /* */, reducer /* */)
```
**Dispatch update to the store**
Dispatch method takes first argument as object { type: string }, `type` key is required
```js
store.dispatch({
type: 'string',
})
```
**Dispatch update to the store with additional data**
```js
store.dispatch({
type: 'string',
value: 1,
// ...other data
})
```
**Dispatch update with additional arguments**
```js
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](https://www.github.com/ravid7000)
## License
[MIT](https://github.com/ravid7000/svelte-dispatchable/blob/master/LICENSE)
## Contributing
Contributions are always welcome!
See [`contributing.md`](https://github.com/ravid7000/svelte-dispatchable/blob/master/contributing.md) for ways to get started.