Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dai-shi/svelte3-redux
[NOT MAINTAINED] Redux for Svelte 3
https://github.com/dai-shi/svelte3-redux
redux svelte svelte3
Last synced: 27 days ago
JSON representation
[NOT MAINTAINED] Redux for Svelte 3
- Host: GitHub
- URL: https://github.com/dai-shi/svelte3-redux
- Owner: dai-shi
- License: mit
- Created: 2019-09-15T01:10:07.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T14:51:50.000Z (almost 2 years ago)
- Last Synced: 2024-09-29T12:02:18.650Z (about 1 month ago)
- Topics: redux, svelte, svelte3
- Language: TypeScript
- Homepage:
- Size: 3.68 MB
- Stars: 30
- Watchers: 4
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte3-redux
[](https://github.com/dai-shi/svelte3-redux/actions?query=workflow%3ACI)
[](https://www.npmjs.com/package/svelte3-redux)
[](https://bundlephobia.com/result?p=svelte3-redux)
Redux for Svelte 3
## Introduction
This is an experimental project to combine Redux and Svelte3.
It provides the same state usage tracking support
in [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux).
## Install
```bash
npm install svelte3-redux
```
## Usage (bind)
This is simple usage.
Reactivity works for all components.
```html
import { createStore } from 'redux';
import { bind } from 'svelte3-redux';
const initialState = {
count: 0,
text: 'hello',
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'increment': return { ...state, count: state.count + 1 };
case 'decrement': return { ...state, count: state.count - 1 };
case 'setText': return { ...state, text: action.text };
default: return state;
}
};
const store = createStore(reducer);
const state = bind(store);
Counter
Count: {$state.count}
state.dispatch({ type: 'increment' })}>+1
state.dispatch({ type: 'decrement' })}>-1
TextBox
Text: {$state.text}
state.dispatch({ type: 'setText', text: event.target.value })} />
```
## Usage (bindTracked)
This is recommended usage.
Reactivity works based on state usage tracking.
### store.js
```javascript
import { createStore } from 'redux';
import { bindTracked } from 'svelte3-redux';
const initialState = {
count: 0,
text: 'hello',
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'increment': return { ...state, count: state.count + 1 };
case 'decrement': return { ...state, count: state.count - 1 };
case 'setText': return { ...state, text: action.text };
default: return state;
}
};
const store = createStore(reducer);
export default () => bindTracked(store);
```
### Counter.svelte
```html
import getTrackedState from './store';
const state = getTrackedState();
Counter
Count: {$state.count}
state.dispatch({ type: 'increment' })}>+1
state.dispatch({ type: 'decrement' })}>-1
```
### TextBox.svelte
```html
import getTrackedState from './store';
const state = getTrackedState();
TextBox
Text: {$state.text}
state.dispatch({ type: 'setText', text: event.target.value })} />
```
## API
### bind
Take Redux store and return a global state for Svelte.
#### Parameters
- `store` **Store<State, Action>**
#### Examples
```javascript
import { createStore } from 'redux';
import { bind } from 'svelte3-redux';
const store = createStore(reducer);
export default bind(store);
```
### bindTracked
Take Redux store and return a global state for Svelte.
With state usage tracking.
#### Parameters
- `store` **Store<State, Action>**
#### Examples
```javascript
import { createStore } from 'redux';
import { bindTracked } from 'svelte3-redux';
const store = createStore(reducer);
export default () => bindTracked(store);
```
## Examples
The [examples](examples) folder contains working examples.
You can run one of them with
```bash
PORT=8080 npm run examples:01_minimal
```
and open in your web browser.