ReactContext用のLoggerを作った
軽量なサービスの場合Reduxを使うのをやめてReactContextで管理するようになったんだけど、値の変更とかのタイミングでログ出してくれるredux-logger的なのあったらいいなと思ったので自作した話
(作ったの3ヶ月ぐらい前だから今だとすでにもっといいのがあるかも・・・
作ったもの
hooks/useLogger.js
import { useCallback, useEffect, useRef } from "react"
import moment from "moment"
const colors = {
prefix: "#4CAF50",
log: "inherit",
prev: "#9E9E9E",
next: "#03A9F4",
error: "#F20404",
}
function usePrevious(value) {
const ref = useRef(null)
useEffect(() => {
ref.current = value
})
return ref.current
}
export function useContextLogger(prefix, inputs) {
Object.keys(inputs).forEach(key => {
const value = inputs[key]
const prev = usePrevious(value)
useEffect(() => {
const timestamp = moment().format("HH:mm:ss.SSS")
console.group(
`%c[${prefix}] %c${key} %c@${timestamp}`,
`color: ${colors.prefix}`,
`color: ${colors.log}; font-weight: bold;`,
"color: gray; font-weight: lighter;",
)
console.log(`%c prev`, `color: ${colors.prev}`, prev)
console.log(`%c next`, `color: ${colors.next}`, value)
console.groupEnd()
}, [value])
})
}
使い方
10分ぐらいでぱぱっと作った例なので微妙なところ満載ですがご容赦を
contexts/todo.jsx
const TodosContext = createContext(null)
const TodosContextProvider = ({ children}) => {
const [todos, setTodos] = useState([])
const add = useCallback((todo) => {
const id = todos.length + 1
setTodos([
...todos,
{
id,
text: todo,
completed: false,
createdAt: moment().format('YYYY/MM/DD HH:mm:ss'),
}
])
}, [todos])
const toggle = useCallback((id) => {
const todo = todos.find(t => t.id === id)
if (!todo) return
setTodos([
...todos.filter(t => t.id !== id),
{ ...todo, completed: !todo.completed },
].sort((a, b) => a.id - b.id))
}, [todos])
const remove = useCallback((id) => {
setTodos(todos.filter(t => t.id !== id))
})
// ロガーで変更を監視したいパラメータをセット
useContextLogger("TodosContext", { todos })
return (
<TodosContext.Provider value={{ todos, add, toggle, remove }}>
{children}
</TodosContext.Provider>
)
}
import { useCallback, useEffect, useRef } from "react"
import moment from "moment"
const colors = {
prefix: "#4CAF50",
log: "inherit",
prev: "#9E9E9E",
next: "#03A9F4",
error: "#F20404",
}
function usePrevious(value) {
const ref = useRef(null)
useEffect(() => {
ref.current = value
})
return ref.current
}
export function useContextLogger(prefix, inputs) {
Object.keys(inputs).forEach(key => {
const value = inputs[key]
const prev = usePrevious(value)
useEffect(() => {
const timestamp = moment().format("HH:mm:ss.SSS")
console.group(
`%c[${prefix}] %c${key} %c@${timestamp}`,
`color: ${colors.prefix}`,
`color: ${colors.log}; font-weight: bold;`,
"color: gray; font-weight: lighter;",
)
console.log(`%c prev`, `color: ${colors.prev}`, prev)
console.log(`%c next`, `color: ${colors.next}`, value)
console.groupEnd()
}, [value])
})
}
10分ぐらいでぱぱっと作った例なので微妙なところ満載ですがご容赦を
const TodosContext = createContext(null)
const TodosContextProvider = ({ children}) => {
const [todos, setTodos] = useState([])
const add = useCallback((todo) => {
const id = todos.length + 1
setTodos([
...todos,
{
id,
text: todo,
completed: false,
createdAt: moment().format('YYYY/MM/DD HH:mm:ss'),
}
])
}, [todos])
const toggle = useCallback((id) => {
const todo = todos.find(t => t.id === id)
if (!todo) return
setTodos([
...todos.filter(t => t.id !== id),
{ ...todo, completed: !todo.completed },
].sort((a, b) => a.id - b.id))
}, [todos])
const remove = useCallback((id) => {
setTodos(todos.filter(t => t.id !== id))
})
// ロガーで変更を監視したいパラメータをセット
useContextLogger("TodosContext", { todos })
return (
<TodosContext.Provider value={{ todos, add, toggle, remove }}>
{children}
</TodosContext.Provider>
)
}
こんな感じでログを仕込むと、↓のように変更前後の値がログとして吐き出される。
本家redux-loggerには全然及ばないけど、まぁそれなりに実用的なものが出来て満足
おまけ
単純なロガーもReactHooks使って作成したので置いとく。
function useLogger(prefix) {
const log = useCallback(
(log, src) => {
const timestamp = moment().format("HH:mm:ss.SSS")
console.log(
`%c[${prefix}] %c${log} @ %c${timestamp}`,
`color: ${colors.prefix}`,
`color: ${colors.log}; font-weight: bold;`,
"color: gray; font-weight: lighter;",
src || "",
)
},
[prefix],
)
return { log }
}
こっちはconsole.log
の代わりに使えて、useLogger
呼び出す際にprefixを設定できるから、どの部分で吐かれたログかを管理するのにいい感じ。
const hogeLogger = useLogger('HogeComponent')
hogeLogger.log('test')
hogeLogger.log('obj ->', obj)
みたいに使える。
Author And Source
この問題について(ReactContext用のLoggerを作った), 我々は、より多くの情報をここで見つけました https://qiita.com/k_tada/items/cfb9a4046984431468b7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .