Remove development code

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]

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 = () => {
         <RsvpReader></RsvpReader>
       </main>
       <footer>Made by Alfred Melch</footer>
-      <Counter />
     </>
   )
 }

src/components/Counter.js

@@ -1,53 +0,0 @@
-import React from 'react'
-import {
-  useCounter,
-  CounterProvider,
-  selectors,
-  useCounterSelector
-} from './CounterStore'
-
-export const Counter = () => {
-  return (
-    <span>
-      <CounterProvider>
-        <MyCounter />
-        <Text />
-        <TextSetter />
-        <Logger />
-      </CounterProvider>
-    </span>
-  )
-}
-
-const Logger = () => {
-  const store = useCounter()
-  return <></>
-}
-
-const MyCounter = () => {
-  const [_, { increment, decrement }] = useCounter()
-  const counter = useCounterSelector(selectors.$count)
-  return (
-    <div>
-      {counter}
-      <button onClick={increment}>+</button>
-      <button onClick={decrement}>-</button>
-    </div>
-  )
-}
-
-const Text = () => {
-  const [{ text }] = useCounter()
-  return <span>{text}</span>
-}
-
-const TextSetter = () => {
-  const [{ text }, { setText }] = useCounter()
-  return (
-    <input
-      type="text"
-      value={text}
-      onChange={evt => setText(evt.target.value)}
-    />
-  )
-}

src/components/CounterSelector.js

@@ -1,9 +0,0 @@
-export const $count = state => {
-  return state.counter
-}
-export const lala = 'lalal'
-
-export default {
-  $count,
-  lala
-}

src/components/CounterStore.js

@@ -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 }

src/index.js

@@ -15,6 +15,7 @@ function createRootElement() {
   body.appendChild(root)
   return root
 }
+
 ReactDOM.render(
   <Provider>
     <App />

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