From 12fd1e39817bcc2cf157e0a867b3060f2d18c819 Mon Sep 17 00:00:00 2001 From: Alfred Melch Date: Sun, 2 Feb 2020 14:31:48 +0100 Subject: [PATCH] Remove development code --- lib/potent-reducer.js | 18 ++++++----- src/App.js | 3 -- src/components/Counter.js | 53 ------------------------------- src/components/CounterSelector.js | 9 ------ src/components/CounterStore.js | 25 --------------- src/index.js | 1 + src/store/index.js | 11 +++++-- 7 files changed, 20 insertions(+), 100 deletions(-) delete mode 100644 src/components/Counter.js delete mode 100644 src/components/CounterSelector.js delete mode 100644 src/components/CounterStore.js diff --git a/lib/potent-reducer.js b/lib/potent-reducer.js index 77b4851..e0b3a0a 100644 --- a/lib/potent-reducer.js +++ b/lib/potent-reducer.js @@ -3,17 +3,18 @@ import React, { createContext, useContext, useMemo, useReducer } from 'react' /** Takes options that fully define a store and turns it into a more potent reducer */ export const usePotentReducer = options => { const { reducer = {}, thunks = {}, initialState } = options + const { extState, extDispatch } = options const { onUpdate, logging } = options const reducerFn = useMemo( () => makeReducerFn(reducer, { onUpdate, logging }), [reducer, onUpdate, logging] ) const [state, dispatch] = useReducer(reducerFn, initialState) - const _thunks = useMemo(() => bindThunks(thunks, dispatch), [ + const _thunks = useMemo(() => bindThunks(thunks, extDispatch || dispatch), [ thunks, - dispatch + extDispatch ]) - return [state, _thunks] + return [extState || state, _thunks] } /** Turn a reducer definition object to a function @@ -21,7 +22,8 @@ export const usePotentReducer = options => { * @param {Object} options * @returns {Function}: Proper reducer */ -function makeReducerFn(reducer, { onUpdate, logging }) { +export function makeReducerFn(reducer, options = {}) { + const { onUpdate, logging } = options const noop = state => state return (prevState, action) => { const { type } = action @@ -73,17 +75,17 @@ function patchDispatch(dispatch, type) { /** A ReducerStore Factory that uses React.context * Used to make a Store accessible through multiple components */ -export const createStore = options => { +export const createStore = initialOptions => { const context = createContext(null) const { Consumer } = context - const Provider = ({ children }) => { - const store = usePotentReducer(options) + const Provider = ({ children, options }) => { + const store = usePotentReducer({ ...initialOptions, ...options }) return React.createElement(context.Provider, { value: store }, children) } const useStore = () => useContext(context) const useSelector = selector => { const val = selector(useContext(context)[0]) - options.warnOnUndefinedSelect && assertSelectedExists(val) + initialOptions.warnOnUndefinedSelect && assertSelectedExists(val) return val } const useDispatch = () => useContext(context)[1] diff --git a/src/App.js b/src/App.js index 8713ce8..2796bc7 100644 --- a/src/App.js +++ b/src/App.js @@ -7,8 +7,6 @@ import { SearchBar } from './components/SearchBar' import './App.css' import { LangSelect } from './components/LangSelect' -import { Counter } from 'components/Counter' - export const App = () => { const { t } = useTranslation() return ( @@ -22,7 +20,6 @@ export const App = () => { - ) } diff --git a/src/components/Counter.js b/src/components/Counter.js deleted file mode 100644 index cb5912a..0000000 --- a/src/components/Counter.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react' -import { - useCounter, - CounterProvider, - selectors, - useCounterSelector -} from './CounterStore' - -export const Counter = () => { - return ( - - - - - - - - - ) -} - -const Logger = () => { - const store = useCounter() - return <> -} - -const MyCounter = () => { - const [_, { increment, decrement }] = useCounter() - const counter = useCounterSelector(selectors.$count) - return ( -
- {counter} - - -
- ) -} - -const Text = () => { - const [{ text }] = useCounter() - return {text} -} - -const TextSetter = () => { - const [{ text }, { setText }] = useCounter() - return ( - setText(evt.target.value)} - /> - ) -} diff --git a/src/components/CounterSelector.js b/src/components/CounterSelector.js deleted file mode 100644 index 0453c2e..0000000 --- a/src/components/CounterSelector.js +++ /dev/null @@ -1,9 +0,0 @@ -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 deleted file mode 100644 index a61fa21..0000000 --- a/src/components/CounterStore.js +++ /dev/null @@ -1,25 +0,0 @@ -import { createStore } from 'potent-reducer' -import selectors from './CounterSelector' - -const initialState = { - counter: 0, - text: 'initial' -} - -const thunks = { - increment: () => dispatch => dispatch(), - decrement: () => dispatch => dispatch(), - setText: text => dispatch => dispatch({ text }) -} - -const reducer = { - INCREMENT: state => ({ ...state, counter: state.counter + 1 }), - DECREMENT: state => ({ ...state, counter: state.counter - 1 }), - SET_TEXT: (state, { text }) => ({ ...state, text }) -} - -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/index.js b/src/index.js index 5bbbaa0..b89b4e2 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,7 @@ function createRootElement() { body.appendChild(root) return root } + ReactDOM.render( diff --git a/src/store/index.js b/src/store/index.js index c2489ba..ac9ecdb 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,4 +1,5 @@ -import { createStore } from 'potent-reducer' +import React, { useEffect, useState } from 'react' +import { createStore, makeReducerFn } from 'potent-reducer' import { safeSelectNextWord, safeSelectNextSentence, @@ -68,7 +69,13 @@ const reducer = { SET_LANG: (state, { lang }) => ({ ...state, lang }) } -const store = createStore({ reducer, thunks, initialState, logging: true }) +const store = createStore({ + reducer, + thunks, + initialState, + logging: true, + warnOnUndefinedSelect: true +}) export const Provider = store.Provider export const useStore = store.useStore export const useSelector = store.useSelector