Redux wrapper powered by Svelte Runes.
npm install @reduxjs/toolkit svedux
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
export interface CounterState {
value: number;
}
const initialState: CounterState = {
value: 0
};
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
}
}
});
// Action creators are generated for each case reducer function
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
<Provider>
component<script lang="ts">
import { Provider } from 'svedux';
import { store } from '../store.js';
</script>
<Provider {store}>
<App />
</Provider>
<script lang="ts">
import { useDispatch, useSelector } from 'svedux';
import type { RootState } from '../store.js';
import { increment } from '../store.js';
const count = useSelector((state: RootState) => state.counter.value);
const dispatch = useDispatch();
</script>
<button onclick={() => dispatch(increment())}>
Clicks: {count.current}
</button>
MIT