Remove development code
This commit is contained in:
parent
1ba18b7341
commit
12fd1e3981
@ -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]
|
||||
|
@ -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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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)}
|
||||
/>
|
||||
)
|
||||
}
|
@ -1,9 +0,0 @@
|
||||
export const $count = state => {
|
||||
return state.counter
|
||||
}
|
||||
export const lala = 'lalal'
|
||||
|
||||
export default {
|
||||
$count,
|
||||
lala
|
||||
}
|
@ -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 }
|
@ -15,6 +15,7 @@ function createRootElement() {
|
||||
body.appendChild(root)
|
||||
return root
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Provider>
|
||||
<App />
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user