redux-logger 도입 및 추천 Log 출력 설정 소개

안녕하세요!
이번은 redux-logger의 도입 해설과 자신이 언제나 최저한 하고 있는 Log 출력 설정의 소개를 하겠습니다.
redux-logger htps : // 기주 b. 코 m / 에 게 니 로오의 v / 레즈 x ぉ 게 r
htps //w w. 음 pmjs. 코 m / 빠 c 가게 / @ r ゔ ぃ さいえい 온 g / Rezu x ぉ 게 r

redux-logger 정보

redux-logger는 수많은 redux middleware 중에서 가장 잘 알려진 것이 아닐까요?
간단히 설명하면 다음 이미지와 같이
Action이 Dispatch되기 전후의 state와 Dispatch 된 Action을 console상에 출력합니다.
의도한 Action이 발동하고 있는지, 그 전후에서 기대한 state의 변경이 의도한 대로 행해지고 있는지 어떤지
확인하는 데 매우 유용합니다. 개발 환경에서 도입되고 있다는 분은 매우 많지 않을까요?


도입 방법
$ npm install --save redux-logger
또는$ yarn add redux-logger
index.js

import {createStore, applyMiddleware} from 'redux'

import logger from 'redux-logger'

const store = createStore(
  reducer,
  applyMiddleware(logger)
)

상당히 대단합니다만, store를 이상과 같이 설정해, redux를 이용한 설계를 행해 가면,
앞의 이미지처럼 redux-logger가 적용된다고 생각합니다.

redux-logger의 Log 출력 설정 정보

여기에서, 이번 기사의 본제가 됩니다만, 이번 설명하겠습니다 redux-logger입니다만, 꽤 세세하게 log의 표시를 설정할 수 있습니다. 로그의 출력 설정을 할 수 있는 것에 대해서는 상당히 알려져 있다고 생각합니다만, 디폴트의 표시가 꽤 뛰어나기 때문에, 그대로 이용하고 있는 쪽이 많은 것은 아닐까요? 이번에는, 자신이 특히 마음에 들고 있어, 곧바로 실천할 수 있는 설정을 소개하겠습니다.

우선 출력 설정의 방법입니다만, 이하와 같이 createLogger 를 import 합니다.
그리고 createLogger 를 이용해 적용하고 싶은 설정을 기술하고, logger
index.js

import {createStore, applyMiddleware} from 'redux'
import { createLogger } from 'redux-logger'

const logger = createLogger({
      ここに任意の設定を記述
});

const store = createStore(
  reducer,
  applyMiddleware(logger)

설정할 수 있는 옵션은 다음과 같습니다( 공식 리포지토리에서 발췌 )

{
  predicate, // if specified this function will be called before each action is processed with this middleware.
  collapsed, // takes a Boolean or optionally a Function that receives `getState` function for accessing current store state and `action` object as parameters. Returns `true` if the log group should be collapsed, `false` otherwise.
  duration = false: Boolean, // print the duration of each action?
  timestamp = true: Boolean, // print the timestamp with each action?

  level = 'log': 'log' | 'console' | 'warn' | 'error' | 'info', // console's level
  colors: ColorsObject, // colors for title, prev state, action and next state: https://github.com/evgenyrodionov/redux-logger/blob/master/src/defaults.js#L12-L18
  titleFormatter, // Format the title used when logging actions.

  stateTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
  actionTransformer, // Transform action before print. Eg. convert Immutable object to plain JSON.
  errorTransformer, // Transform error before print. Eg. convert Immutable object to plain JSON.

  logger = console: LoggerObject, // implementation of the `console` API.
  logErrors = true: Boolean, // should the logger catch, log, and re-throw errors?

  diff = false: Boolean, // (alpha) show diff between states?
  diffPredicate // (alpha) filter function for showing states diff, similar to `predicate`
}

이상의 항목이 있습니다만, 최소한 자신이 언제나 설정하고 있는 항목은

collapsed

diff

두 가지입니다.

collapsed

collapsed = (getState: Function, action: Object) => Boolean아주 간단히 설명하면collapsed:true 로 로그 그룹을 접어 표시합니다. (기본적으로 false)
애플리케이션이 커지면 발행되는 Action의 수도 점차 많아지고,
로그가 콘솔을 채우고 가시성이 나쁘다고 느낀 적이 있습니까?
그런 때에는, 이 설정이 유용하다고 나는 생각하고 있습니다.
기본적으로 다음과 같이 확장된 상태로 표시되지만,
collapsed:true 로 하면 다음과 같이 접힌 상태로 표시됩니다.

diff

diff:true,여기는 true 로 하는 것으로, Action의 발행 전후에 있어서, state의 차분을 明示的 에 표시해 줍니다.
차분이 명시적으로 표시되는 것으로 디버그도 낭비하는 것이 아닐까요?
(이하 참고예

diff 부분 발췌

요약

간단히 정리하면 내가 최소한 설정은 다음과 같습니다.

const logger = createLogger({
    diff:true,
    collapsed:true,
})

실제로는 한층 더 세세하게, 출력의 설정을 실시할 수 있습니다만, 이번은 곧바로 설정할 수 있는 것에 한정해서 소개했습니다.
수요가 있다면 다른 Option에 대해 언급한 기사를 게시하고 싶습니다.
또 괜찮으면, 여러분이 가고 있는 추천의 설정등도 코멘트 주시면 다행입니다.