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

2. Wrap your main App with the <Provider> component

import { Provider } from 'svedux'

<Provider>
  <App />
</Provider>

3. 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.value }
</button>

License

MIT