diff --git a/src/components/Book.js b/src/components/Book.js index e12ffa6..537fddd 100644 --- a/src/components/Book.js +++ b/src/components/Book.js @@ -1,17 +1,15 @@ import React from 'react' -import { useDispatch } from 'react-redux' - -import { setText, setLang } from '../store/actions' import { getBook } from '../lib/gutenberg' import styles from './Book.css' +import { useStore } from '../store/RSVPStore' -export const Book = ({ author, language, rights, subject, title, id }) => { - const dispatch = useDispatch() +export const Book = ({ author, language, title, id }) => { + const [_, { setText, setLang }] = useStore() const handleClick = async () => { - dispatch(setText(await getBook(id))) - dispatch(setLang(language[0])) + setText(await getBook(id)) + setLang(language[0]) } return (
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)} />