diff --git a/src/components/Counter.js b/src/components/Counter.js
index e82d003..cb5912a 100644
--- a/src/components/Counter.js
+++ b/src/components/Counter.js
@@ -1,5 +1,10 @@
import React from 'react'
-import { useCounter, CounterProvider } from './CounterStore'
+import {
+ useCounter,
+ CounterProvider,
+ selectors,
+ useCounterSelector
+} from './CounterStore'
export const Counter = () => {
return (
@@ -16,12 +21,12 @@ export const Counter = () => {
const Logger = () => {
const store = useCounter()
- console.log(store[0])
return <>>
}
const MyCounter = () => {
- const [{ counter }, { increment, decrement }] = useCounter()
+ const [_, { increment, decrement }] = useCounter()
+ const counter = useCounterSelector(selectors.$count)
return (
{counter}
diff --git a/src/components/CounterSelector.js b/src/components/CounterSelector.js
new file mode 100644
index 0000000..0453c2e
--- /dev/null
+++ b/src/components/CounterSelector.js
@@ -0,0 +1,9 @@
+export const $count = state => {
+ return state.counter
+}
+export const lala = 'lalal'
+
+export default {
+ $count,
+ lala
+}
diff --git a/src/components/CounterStore.js b/src/components/CounterStore.js
index 2243ae1..a61fa21 100644
--- a/src/components/CounterStore.js
+++ b/src/components/CounterStore.js
@@ -1,4 +1,5 @@
-import { createStore } from 'context-store'
+import { createStore } from 'potent-reducer'
+import selectors from './CounterSelector'
const initialState = {
counter: 0,
@@ -17,6 +18,8 @@ const reducer = {
SET_TEXT: (state, { text }) => ({ ...state, text })
}
-const store = createStore({ reducer, thunks, initialState })
+const store = createStore({ reducer, thunks, initialState, logging: true })
export const CounterProvider = store.Provider
export const useCounter = store.useStore
+export const useCounterSelector = store.useSelector
+export { selectors }
diff --git a/src/components/Options.js b/src/components/Options.js
index 561c020..ee19b7c 100644
--- a/src/components/Options.js
+++ b/src/components/Options.js
@@ -1,22 +1,20 @@
import React from 'react'
-import { useSelector, useDispatch } from 'react-redux'
import { debounce } from 'debounce'
-import { setMaxLength, setWpm, setOffset, setLang } from '../store/actions'
import { Slider } from './Slider'
import { selectOffset, selectLang } from '../store/selectors'
+import { useSelector, useDispatch } from '../store/RSVPStore'
import { useTranslation } from 'react-i18next'
const availableLanguages = ['en', 'de']
export const Options = () => {
const { t } = useTranslation()
- const dispatch = useDispatch()
const maxLength = useSelector(state => state.maxLength)
const wpm = useSelector(state => state.wpm)
const offset = useSelector(selectOffset)
const lang = useSelector(selectLang)
-
+ const { setMaxLength, setWpm, setOffset, setLang } = useDispatch()
return (
{t('options.title')}
@@ -25,25 +23,25 @@ export const Options = () => {
min={3}
max={15}
value={maxLength}
- onChange={debounce(val => dispatch(setMaxLength(val)), 100)}
+ onChange={debounce(val => setMaxLength(val), 100)}
/>
dispatch(setWpm(val)), 50)}
+ onChange={debounce(val => setWpm(val), 50)}
/>
dispatch(setOffset(val))}
+ onChange={val => setOffset(val)}
/>