Skip to content
This repository has been archived by the owner on Mar 7, 2022. It is now read-only.

Redux Inspector is a plugin for Redux.

Notifications You must be signed in to change notification settings

sanjairocky/redux-inspector

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

What’s a Redux Inspector?

Redux Inspector is a plugin for Redux.

npm version npm downloads npm license

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 :

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.
const Attributes = [
  ["name", "", "name"],
  ["nickName", "details/personal", "details/personal/nickName"],
  ["nickName", "details/official", "details/official/nickName"],
];
  • using '.' as a delimiter.
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

["nickName", "details.personal", "details.personal.nickName"];
  • first : attributePath or name
  • second : parentPath
  • third : completePath of the attribute

installation

npm install redux-inspector

or

yarn add redux-inspector

Import

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

or

import ReduxInspector from "redux-inspector";

SpyOn & SpyOff usage

consider same example :

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
inspector.spyOn("details.personal.nickName", (prevState, newState) => {});

or

inspector.spyOn("nickName", "details.personal", (prevState, newState) => {});
  • SpyOff
inspector.spyOff("details.personal.nickName");

or

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

Example Usage

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