What’s a Redux Inspector?

Redux Inspector is a plugin for Redux.

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