melch/rsvp-reader
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rename and add logging

Browse Source
This commit is contained in:
Alfred Melch 2020-02-01 15:53:44 +01:00
parent 3255c42253
commit 7434b1e17e
1 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
lib/context-store.js → lib/potent-reducer.js
View File

@ -1,9 +1,13 @@
import React, { createContext, useContext, useMemo, useReducer } from 'react'
/** Takes objects that fully define a store and turns it into a more potent reducer */
export const useReducerStore = storeDef => {
const { reducer = {}, thunks = {}, initialState } = storeDef
const reducerFn = useMemo(() => makeReducerFn(reducer), [reducer])
export const usePotentReducer = options => {
const { reducer = {}, thunks = {}, initialState } = 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), [
thunks,
@ -15,10 +19,10 @@ export const useReducerStore = storeDef => {
/** A ReducerStore Factory that uses React.context
* Used to make a Store accessible through multiple components
*/
export const createStore = storeDef => {
export const createStore = options => {
const context = createContext(null)
const Provider = ({ children }) => {
const store = useReducerStore(storeDef)
const store = usePotentReducer(options)
return React.createElement(context.Provider, { value: store }, children)
}
const useStore = () => useContext(context)
@ -29,12 +33,16 @@ export const createStore = storeDef => {
* @param {Object} reducer: Object definition of a reducer: {<type>: (state, payload) => <newState>}
* @returns {Function}: Proper reducer
*/
function makeReducerFn(reducer) {
return (state, action) => {
function makeReducerFn(reducer, { onUpdate, logging }) {
const noop = state => state
return (prevState, action) => {
const { type, ...payload } = action
if (typeof reducer[type] === 'undefined') return state
const newState = reducer[type](state, payload)
return newState
const reducerBranch = reducer[type] || reducer['default'] || noop
const nextState = reducerBranch(prevState, payload)
const stats = { prevState, nextState, action }
typeof onUpdate === 'function' && onUpdate(stats)
if (logging) logger(stats)
return nextState
}
}
@ -60,3 +68,13 @@ function patchDispatch(dispatch, type) {
dispatch({ type, ...action })
}
}
/** Log action inspired by redux-logger */
const logger = ({ prevState, action, nextState }) => {
const css = color => `color: ${color}; font-weight: bold;`
console.groupCollapsed(`%c action`, 'color: #9E9E9E', action.type)
console.log('%c prevState ', css('#9E9E9E'), prevState)
console.log('%c action ', css('#03A9F4'), action)
console.log('%c nextState ', css('#4CAF50'), nextState)
console.groupEnd()
}