Remove development code

This commit is contained in:
Alfred Melch 2020-02-02 14:31:48 +01:00
parent 1ba18b7341
commit 12fd1e3981
7 changed files with 20 additions and 100 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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