62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import { configureStore, createSlice } from '@reduxjs/toolkit'
|
|
import { Provider, useSelector } from 'react-redux'
|
|
|
|
const counterSlice = createSlice({
|
|
name: 'counter',
|
|
initialState: {
|
|
value: 0,
|
|
},
|
|
reducers: {
|
|
increment: (state) => {
|
|
state.value += 1
|
|
},
|
|
decrement: (state) => {
|
|
state.value -= 1
|
|
},
|
|
incrementByAmount: (state, action) => {
|
|
state.value += action.payload
|
|
},
|
|
},
|
|
})
|
|
|
|
export const { increment, decrement, incrementByAmount } = counterSlice.actions
|
|
|
|
export const store = configureStore({
|
|
reducer: {
|
|
counter: counterSlice.reducer,
|
|
},
|
|
})
|
|
|
|
export const StoreProvider: React.FC = (props) => {
|
|
return <Provider store={store}>{props.children}</Provider>
|
|
}
|
|
|
|
export const useStore = () => {
|
|
//@ts-ignore
|
|
const count = useSelector((state) => state.counter.value)
|
|
|
|
return {
|
|
count,
|
|
increment: () => store.dispatch(increment()),
|
|
decrement: () => store.dispatch(decrement()),
|
|
incrementByAmount: (value) => store.dispatch(incrementByAmount(value)),
|
|
}
|
|
}
|
|
|
|
export const useSvelteSelector = (select, onChange) => {
|
|
let currentState
|
|
|
|
function handleChange() {
|
|
let nextState = select(store.getState())
|
|
if (nextState !== currentState) {
|
|
currentState = nextState
|
|
onChange(currentState)
|
|
}
|
|
}
|
|
|
|
store.subscribe(handleChange)
|
|
handleChange()
|
|
return currentState
|
|
}
|