react-hooks-logger

react-hooks-logger

npm i react-hooks-logger

Simple hooks logger. (Respect redux-logger and use-reducer-logger)

Usage

import { useReducer } from 'react-hooks-logger';

function reducer(state, action) {
  switch (action.type) {
    case 'count-up':
      return { count: state.count + action.payload.count }

    case 'count-down':
      return { count: state.count - action.payload.count }
  }
}
const initialState = { count: 0 };

const Demo = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
<div>
      <button
        onClick={() =>
          dispatch({
            type: "count-up",
            payload: { count: 1 }
          })
        }
      >
        +
      </button>
      <button
        onClick={() =>
          dispatch({
            type: "count-down",
            payload: { count: 1 }
          })
        }
      >
        -
      </button>
      count: {state.count}
    </div>
  );
};

Dev Environment

Create custom hooks.

import { useReducer: _useReducer } from 'react';
import { useReducer: useReducerWithLog } from 'react-hooks-logger';

export const useMyReducer = 
  process.env.NODE_ENV === 'development' ? useReducerWithLog : _useReducer;

Import your hooks.

import { useReducer } from './useMyReducer';

...

Todo

• Another Hooks API logger