connect your svelte store to redux devtools
npm install svelte-reduxifyshell script
npm install svelte-reduxify
`Usage
`javascript
import { reduxify } from "svelte-reduxify";
const store = reduxify(writable(0));
`Full example
Original code
`javascript
import { writable } from 'svelte/store';function createCount() {
const { subscribe, set, update } = writable(0);
return {
subscribe,
increment: () => update(n => n + 1),
decrement: () => update(n => n - 1),
reset: () => set(0)
};
}
export const count = createCount();
`
Modified code
`javascript
import { writable } from 'svelte/store';
import { reduxify } from "svelte-reduxify";function createCount() {
const { subscribe, set, update } = writable(0);
return reduxify({
update, // necessary for updating state from devtools
subscribe,
increment: () => update(n => n + 1),
decrement: () => update(n => n - 1),
reset: () => set(0)
});
}
export const count = createCount();
`Comparison
`diff
import { writable } from 'svelte/store';
+ import { reduxify } from "svelte-reduxify";
function createCount() {
const {subscribe, set, update } = writable(0);
- return {
+ return reduxify({
+ update, // necessary for updating state from devtools
subscribe,
increment: () => update(n => n + 1),
decrement: () => update(n => n - 1),
reset: () => set(0)
- }
+ });
}
export const count = createCount();
`Redux DevTools
$3
!Redux DevTools
You can "Jump" to states and use the timeline slider$3
You can dispatch an action by name
!Dispatch Actions
You can also dispatch state in JSON` format