@ourway/svelte-redux
v0.0.2
Published
Svelte enhancer to connect to a redux store.
Downloads
4
Readme
svelte-redux
Svelte enhancer to connect to a redux store.
Install the svelte enhancer with
bun install @ourway/svelte-redux
then use the following store.ts
to enhance your reducer. This example
uses a reducer called counter (see below).
${lib}/store.ts
import { configureSvelteStore } from "@ourway/svelte-redux";
import type { Writable } from "svelte/store";
import { counter } from "./counter";
const reducer = {
counter,
};
const reduxStore = configureSvelteStore(reducer);
type ReduxStore = typeof reduxStore;
type GlobalState = ReturnType<typeof reduxStore.getState>;
type SvelteStore = Writable<GlobalState>;
export const store = reduxStore as ReduxStore & SvelteStore;
${lib}/counter.ts
import { createAction, createReducer } from "@reduxjs/toolkit";
export interface CounterState {
value: number;
}
export const increment = createAction("increment");
export const decrement = createAction("decrement");
export const initialState: CounterState = {
value: 0,
};
export const counter = createReducer(initialState, (r) => {
r.addCase(increment, (state, action) => {
state.value++;
});
r.addCase(decrement, (state, action) => {
state.value = Math.max(state.value - 1, 0);
});
});
From svelte code, use $store to access the redux store.
${src}/routes/+page.svelte
<script lang="ts">
import { decrement, increment } from "$lib/counter";
import { store } from "$lib/store";
function inc() {
store.dispatch(increment())
}
function dec() {
store.dispatch(decrement())
}
function processValue() {
console.log($store.counter.value, printoutCounter);
}
let printoutCounter = 0;
$: if($store.counter.value > 5) {
processValue();
}
</script>
<h1>Redux Store Example</h1>
<p>
<button on:click={inc}>+</button>
<button on:click={dec}>-</button>
Counter: {$store.counter.value}
</p>
<p>
<button on:click={() => printoutCounter++}>+</button>
<button on:click={() => printoutCounter--}>-</button>
2ndCounter: {printoutCounter}
</p>