svedux Svelte Themes

Svedux

An easy way to integrate Redux with Svelte.

svedux

Redux wrapper powered by Svelte Runes.

Installation

npm install @reduxjs/toolkit svedux

Usage

  1. Create a store
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;
  1. Wrap your main App with the <Provider> component
<script lang="ts">
    import { Provider } from 'svedux';
    import { store } from '../store.js';
</script>

<Provider {store}>
    <App />
</Provider>
  1. Use the helpers in your components
<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>

License

MIT

Top categories

Loading Svelte Themes