https://github.com/Zaelot-Inc/use-reducer-logger

A very basic logger for the useReducer function in the React Hooks API.
https://github.com/Zaelot-Inc/use-reducer-logger

logger logger-middleware logging logging-library react react-hooks-api reacthooks reactjs reducer-logger

Last synced: 3 days ago
JSON representation

A very basic logger for the useReducer function in the React Hooks API.

• Host: GitHub
• URL: https://github.com/Zaelot-Inc/use-reducer-logger
• Owner: Zaelot-Inc
• License: mit
• Created: 2019-02-20T02:25:59.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-10-16T19:44:56.000Z (over 3 years ago)
• Last Synced: 2025-01-17T21:41:42.786Z (15 days ago)
• Topics: logger, logger-middleware, logging, logging-library, react, react-hooks-api, reacthooks, reactjs, reducer-logger
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/use-reducer-logger
• Size: 41 KB
• Stars: 94
• Watchers: 4
• Forks: 16
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-reducer-logger

A very very basic logger for the `useReducer` function in the [React Hooks API](https://reactjs.org/docs/hooks-reference.html#usereducer). Inspired by [redux-logger](https://github.com/LogRocket/redux-logger).

![screenshot of logger](screenshot.png)

# Usage

1. Install with `npm install use-reducer-logger --save-dev` or `yarn add use-reducer-logger -D`

2. Import logger with

```javascript

import logger from 'use-reducer-logger';

```

3. Wrap your reducer with logger before passing it to `useReducer`

```javascript

const [state, dispatch] = useReducer(logger(reducer), initialState);

```

See [Example](https://github.com/jefflombard/use-reducer-logger-example)

## In a Dev Environment

You should only use this in a `dev` environment. So you could do something like this to apply the logger based on the `env`.

```javascript

function reducer(state, action) {

  switch (action.type) {

    case 'increment':

      return {count: state.count + 1};

    case 'decrement':

      return {count: state.count - 1};

    default:

      throw new Error();

  }

}

const [state, dispatch] = useReducer(

  process.env.NODE_ENV === 'development' ? logger(reducer) : reducer,

  initialState

);

```

# License

MIT see [`LICENSE`](/LICENSE).

# Contributing

Contributions are welcome.

# Sponsor

This repo is now sponsored/maintained by [Zaelot Inc.](https://zaelot.com)