svedux
v0.0.2
Published
[![npm (tag)](https://img.shields.io/npm/v/svedux?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/svedux) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/svedux?style=flat&colorA=000000&colorB=000000) ![NPM](https://im
Downloads
44
Readme
svedux
Redux wrapper powered by Svelte Runes.
Installation
npm install @reduxjs/toolkit svedux
Usage
- 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
- Wrap your main App with the
<Provider>
component
import { Provider } from 'svedux'
<Provider>
<App />
</Provider>
- 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