# redux-inspector

> A simple light weight event inspector for redux

Latest version **1.0.4** (published 2020-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-inspector
pnpm add redux-inspector
yarn add redux-inspector
bun add redux-inspector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-08-18 |
| First published | 2020-08-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | sanjairocky |
| Maintainers | sanjairocky |
| Keywords | redux, event, event-inspector, event-emitter, redux-inspector |

## Links

- npm: https://www.npmjs.com/package/redux-inspector
- Repository: https://github.com/sanjairocky/redux-inspector
- Issues: https://github.com/sanjairocky/redux-inspector/issues
- npm.io page: https://npm.io/package/redux-inspector

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-08-18
- 1.0.3 — 2020-08-18
- 1.0.2 — 2020-08-18
- 1.0.1 — 2020-08-17
- 1.0.0 — 2020-08-17

## README

## What’s a Redux Inspector?

[Redux Inspector](https://www.npmjs.com/package/redux-inspector) is a plugin for Redux.

[![npm version](https://img.shields.io/npm/v/redux-inspector.svg?style=flat-square)](https://www.npmjs.com/package/redux-inspector)
[![npm downloads](https://img.shields.io/npm/dm/redux-inspector.svg?style=flat-square)](https://www.npmjs.com/package/redux-inspector)
[![npm license](https://img.shields.io/npm/l/redux-inspector.svg?style=flat-square)](https://www.npmjs.com/package/redux-inspector)

## Why Do I Need This?

With a plain basic Redux store, you can only do simple synchronous updates by
dispatching an action. this extends the store's abilities, and lets you
write async logic that interacts with the store.

ReduxInspector is for basic Redux side effects logic which is used to target specific
attribute of the state,including complex synchronous logic that needs access to the store,
and simple async logic like AJAX requests.

## API's

- ReduxInspector({}) : it will accept options via constructor. Currently there is only one option. which is to customise the delimiter between the attributes.

  - delimiter : ['.','/'] : default is '.'

- watch(STORE) : it consumes the initialized store object to be watched.
- spyOn(ATTRIBUTE_PATH,PARENT_PATH,CALLBACK) : this will add a listener for that attribute to the store. if the attribute doesn't exists, it has no effect. But, if the attribute is dynamically adding to the store, this will get triggered.
- spyOff(ATTRIBUTE_PATH,PARENT_PATH) : this will remove the registered listeners to the store. if the attribute doesn't exists, it has no effect.

# Path findings

consider an example of Object :

```js
const ex = {
  name: "sampleName",
  details: {
    personal: {
      nickName: "dummy",
    },
    official: {
      nickName: "genius",
    },
  },
};
```

Delimiter is defined while instantiating the ReduxInspector. The possible AttributePath's might be as follows:

- using '/' as a delimiter.

```js
const Attributes = [
  ["name", "", "name"],
  ["nickName", "details/personal", "details/personal/nickName"],
  ["nickName", "details/official", "details/official/nickName"],
];
```

- using '.' as a delimiter.

```js
const Attributes = [
  ["name", "", "name"],
  ["nickName", "details.personal", "details.personal.nickName"],
  ["nickName", "details.official", "details.official.nickName"],
];
```

Above is the example usage. take one & look detail.

i.e: nickName inside personal

```js
["nickName", "details.personal", "details.personal.nickName"];
```

- first : attributePath or name
- second : parentPath
- third : completePath of the attribute

# installation

```bash
npm install redux-inspector

```

or

```bash
yarn add redux-inspector

```

# Import

```js
const ReduxInspector = require("redux-inspector");
```

or

```js
import ReduxInspector from "redux-inspector";
```

## SpyOn & SpyOff usage

consider same example :

```js
const ex = {
  name: "sampleName",
  details: {
    personal: {
      nickName: "dummy",
    },
    official: {
      nickName: "genius",
    },
  },
};
const inspector = new ReduxInspector();
```

Same delimiter must be used in the path as well. In this case, we are using '.' as a delimiter.
Adding listener for nickName attribute inside personal :

- SpyOn

```js
inspector.spyOn("details.personal.nickName", (prevState, newState) => {});
```

or

```js
inspector.spyOn("nickName", "details.personal", (prevState, newState) => {});
```

- SpyOff

```js
inspector.spyOff("details.personal.nickName");
```

or

```js
inspector.spyOff("nickName", "details.personal");
```

# Example Usage

```js
const inspector = new ReduxInspector({
  delimiter: "/",
});

function todos(
  state = {
    text: [],
  },
  action
) {
  switch (action.type) {
    case "ADD_TODO":
      return { ...state, text: state.text.concat([action.text]) };
    default:
      return state;
  }
}

const store = Redux.createStore(todos, { text: ["helo"] });

inspector.watch(store);

// this only works when root is a attribute
inspector.spyOn("", (prevState, newState) => {
  // validate
  console.log(prevState, newState);
});

inspector.spyOn("text", (prevState, newState) => {
  // validate
  console.log(prevState, newState);
});

inspector.spyOff("");

inspector.spyOff("text");

function addTodo(text) {
  return {
    type: "ADD_TODO",
    text,
  };
}

store.dispatch(addTodo("Read the docs"));
store.dispatch(addTodo("Read about the middleware"));
```

# Issues & Features

Feel free to raise an issue to get a new feature / bug fix.

# License

MIT

---
_Source: https://npm.io/package/redux-inspector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._