https://github.com/wobsoriano/svedux

An easy way to integrate Redux with Svelte.
https://github.com/wobsoriano/svedux

redux redux-toolkit state-management svelte

Last synced: about 1 month ago
JSON representation

An easy way to integrate Redux with Svelte.

• Host: GitHub
• URL: https://github.com/wobsoriano/svedux
• Owner: wobsoriano
• Created: 2022-07-05T20:36:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-07T03:30:42.000Z (12 months ago)
• Last Synced: 2024-11-01T08:12:04.528Z (3 months ago)
• Topics: redux, redux-toolkit, state-management, svelte
• Language: TypeScript
• Homepage:
• Size: 199 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svedux

[![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://img.shields.io/npm/l/svedux?style=flat&colorA=000000&colorB=000000)

Redux wrapper powered by Svelte Runes.

## Installation

```sh

npm install @reduxjs/toolkit svedux

```

## Usage

1. Create a store

```ts

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 `` component

```svelte

import { Provider } from 'svedux'

  

```

3. Use the helpers in your components

```svelte

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()

 dispatch(increment())}>

  Clicks: { count.value }

```

## License

MIT