Filterable tree view monitor for Redux DevTools

Overview

redux devtools filterable log monitor logo

=========================

NPM version NPM license NPM total downloads NPM monthly downloads

Filterable tree view monitor for Redux DevTools.

Actions are collapsed by default but they can be expanded by clicking on the action type. Strings and regular expressions can be used to filter actions by type as well as to filter the state tree by nodes or values.

Check out the demo application here.

Demo GIF

Installation

npm install --save-dev redux-devtools-filterable-log-monitor

Usage

The FilterableLogMonitor is intended for use within the DockMonitor. You can configure your app to use these monitors like so:

import React from 'react'
import { createDevTools } from 'redux-devtools'
import DockMonitor from 'redux-devtools-dock-monitor'
import FilterableLogMonitor from '../src'

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey='ctrl-q'>
    <FilterableLogMonitor/>
  </DockMonitor>
)

export default DevTools

Then you can render <DevTools> to any place inside app or even into a separate popup window.

Read how to start using Redux DevTools.

Features

Every action is displayed in the log. Use the filter input to quickly and easily locate nodes in your store that are deeply nested. You can search using regular expressions or simple strings. Select whether the search should match keys, values, or either using the checkboxes above the filter input.

Contributions

Use GitHub issues for requests.

I actively welcome pull requests; learn how to contribute.

Changelog

Changes are tracked in the changelog.

License

react-virtualized is available under the MIT License.

Issues
  • Work in conjunction with

    Work in conjunction with "standard" redux devtools

    Hey there,

    Awesome tool!

    I'm just wondering if there is a way to use this in conjunction with the "standard" redux devtools. Is that possible, and if so, can you provide an example of how to do it?

    Thanks! Thomas

    help wanted discussion 
    opened by tnrich 17
  • TypeError Cannot read property value of nullonActionFilterTextChange

    TypeError Cannot read property value of nullonActionFilterTextChange

    Hi, this looks like a really useful component; I've been wanting something like this for monitoring my store. Unfortunately I can't seem to get it to work within an existing project, after installing and replacing LogMonitorwith FilterableLogMonitorI get the following error:

    Here's where I'm creating my store if this helps:

    Uncaught TypeError: Cannot read property 'value' of nullonActionFilterTextChange @ main.js:1972 complete @ main.js:2160 delayed @ main.js:2170

    import React from 'react';
    import { createDevTools } from 'redux-devtools';
    import DockMonitor from 'redux-devtools-dock-monitor';
    import FilterableLogMonitor from 'redux-devtools-filterable-log-monitor';
    
    export default createDevTools(
      <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false} defaultPosition="left">
        <FilterableLogMonitor/>
      </DockMonitor>
    );
    
    

    Do you know what I might be missing? Thanks.

    bug 
    opened by kjr247 14
  • Added auto scroll to the end after store update (by closed issues/31)

    Added auto scroll to the end after store update (by closed issues/31)

    Hello! We use your library in project. And we really needed auto scroll to last action (if panel is not over). I see closed issue and i see, you were not against it, so, i'm make it.

    Added auto scroll to the end after store update (by closed issues/31). Added new test auto-trigger button.

    opened by edtoken 7
  • This commit accounts for differences in JSONTree's renderer callbacks.

    This commit accounts for differences in JSONTree's renderer callbacks.

    valueRenderer: passes a scalar value as an argument to the callback you provide. labelRenderer: passes a array value as an argument to the callback you provide. This array value is the key ancestry of the json tree.

    The Problem:

    The name formating issue in FilterableState.js was caused by rendering the entire key ancestry array as a string for every key, instead of just the name of the key.

    Example: when trying to render the "child" from this piece of state

    {
      grandParent: {
        parent: {
          child: { /*...*/ }
        }
      }
    }
    

    the labelRenderer callback, you provided, will be given the key and its ancestry as a value.

    function labelRenderer (value) {
      // value == ["child", "parent", "grandParent"]
      return value;
    }
    

    JSONTree takes the return of labelRenderer and renders it as a string. So the above return value becomes "childparentgrandParent".

    This is why you get the visual bug in the preview of state for the LogMonitor.

    The Solution:

    return the first key, instead of the entire key ancestry, to get the correctly formatted label.

    opened by arcin 5
  • Doesn't work with Browserify

    Doesn't work with Browserify

    Hi,

    Unfortunately it's not possible to use this with browserify as you get the following error during bundling:

    Error: Cannot find module ‘!!./../../node_modules/css-loader/index.js?modules&importLoaders=1!./../../node_modules/cssnext-loader/index.js!./FilterHeader.css’ from ‘c:\dev....\node_modules\redux-devtools-filterable-log-monitor\dist’

    bug help wanted 
    opened by Haemoglobin 5
  • Update dependencies (React 16)

    Update dependencies (React 16)

    Hello! After we roll out the update dependecies from issue #38 I would like to update the dependencies and fixes to React16.

    This is issue for pull request :)

    opened by edtoken 5
  • display action parameters

    display action parameters

    Would it be possible to include the action parameters as well like the other LogMonitor?

    I think it would just be case of changing FilterableStates.js like this:

    
          {expanded &&
            <JSONTree
              data={action}
              labelRenderer={labelRenderer}
              style={{
                marginTop: 0,
                marginBottom: 0,
                marginLeft: 0,
                marginRight: 0
              }}
              theme={theme}
              valueRenderer={valueRenderer}
            />
          }
          <br/>
          {expanded &&
            <JSONTree
              data={filteredState}
              labelRenderer={labelRenderer}
              style={{
                marginTop: 0,
                marginBottom: 0,
                marginLeft: 0,
                marginRight: 0
              }}
              theme={theme}
              valueRenderer={valueRenderer}
            />
          }
    
    enhancement 
    opened by SimeonC 4
  • Show/Hide by cookie

    Show/Hide by cookie

    Hello! In our project we added one convenient feature. Auto show/hide after page refresh by cookie value DevTools:defaultShow

    And, developers can enable/disable panel from cookie. Now, we moved it value to localstorage.

    What do you think about this? Maybe, it's feature for redux-devtools and read value from it?

    opened by edtoken 3
  • Get a TypeError when using in DockMonitor

    Get a TypeError when using in DockMonitor

    Hi, this looks like a really useful component; I've been wanting something like this for monitoring my store. Unfortunately I can't seem to get it to work within an existing project, after installing and replacing LogMonitor with FilterableLogMonitor I get the following error:

    Uncaught TypeError: Monitor.update is not a function(anonymous function) @ createDevTools.js:35

    Here's where I'm creating my store if this helps:

    import React from 'react';
    import { createDevTools } from 'redux-devtools';
    import DockMonitor from 'redux-devtools-dock-monitor';
    import FilterableLogMonitor from 'redux-devtools-filterable-log-monitor';
    
    export default createDevTools(
      <DockMonitor
        changePositionKey='ctrl-q'
        defaultIsVisible={false}
        defaultPosition="left"
        toggleVisibilityKey='ctrl-h'
        >
        <FilterableLogMonitor />
      </DockMonitor>
    );
    

    Do you know what I might be missing? Thanks.

    question 
    opened by bobwhitelock 3
  • Allow to assign a custom class to the monitor container

    Allow to assign a custom class to the monitor container

    Hello! I'm using this useful monitor but I have a minor style problem. In the app I'm working on checkboxes have a custom style to be more nice to the user's eye, but that don't fit well with the monitor checkboxes.

    I'm wondering if it would be a problem to assign a custom className to the monitor so I can reset checkbox's css in my stylesheet only for the monitor?

    Thanks for your time!

    enhancement 
    opened by ingro 3
  • Names Formatting issue

    Names Formatting issue

    Recently noticed that all elements have variable type + name + root appended to it. ie. booleanbasicTypesroot should just be basicTypes as shown in the homepage gif

    Even in the example app: https://bvaughn.github.io/redux-devtools-filterable-log-monitor/

    Currently it makes it a bit difficult to navigate

    help wanted 
    opened by ajunB7 2
  • Add a chrome extension

    Add a chrome extension

    It'd be nice to be able to easily install a chrome extension with this UI.

    enhancement discussion 
    opened by jasonLaster 3
  • Investigate virtualization

    Investigate virtualization

    react-virtualized supports dynamic row heights (see bvaughn/react-virtualized/issues/23) but these heights must be determined prior to actually rendering the row. If/when react-virtualized arbitrary row heights, investigate virtualizing the log viewer for better rendering performance.

    enhancement 
    opened by bvaughn 0
Owner
Brian Vaughn
React JS core team at @facebook; formerly at @treasure-data and @google.
Brian Vaughn
The default monitor for Redux DevTools with a tree view

Redux DevTools Log Monitor The default monitor for Redux DevTools with a tree view. It shows a log of states and actions, and lets you change their hi

Dan Abramov 310 Sep 17, 2021
Another Redux DevTools Monitor

redux-devtools-inspector This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull

Alexander Kuznetsov 241 Aug 10, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.2k Nov 23, 2021
A resizable and movable dock for Redux DevTools monitors

Redux DevTools Dock Monitor A resizable and movable dock for Redux DevTools. Powered by React Dock. Installation npm install --save-dev redux-devtools

Dan Abramov 401 Nov 11, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.2k Nov 24, 2021
Redux DevTools remotely.

Remote Redux DevTools Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps. Installation npm install --save-dev re

Mihail Diordiev 1.8k Nov 25, 2021
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 10 Aug 23, 2021
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Nov 23, 2021
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Nov 18, 2021
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 21.6k Dec 2, 2021
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Nov 25, 2021
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 6.8k Dec 2, 2021
Thunk middleware for Redux

Redux Thunk Thunk middleware for Redux. npm install redux-thunk yarn add redux-thunk Note on 2.x Update Most tutorials today assume that you're using

Redux 16.8k Nov 24, 2021
Logger for Redux

Logger for Redux Now maintained by LogRocket! LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your o

null 5.6k Nov 21, 2021
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

Redux 18.4k Nov 26, 2021
An alternative side effect model for Redux apps

redux-saga redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like acce

Redux-Saga 21.9k Nov 24, 2021
Declarative Side Effects for Redux

Redux Data FX Declarative Side Effects for Redux. It helps you keep your business logic and effectful code separate. The idea is simple: in addition o

Matthieu Béteille 53 Jun 30, 2021
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

redux-observable 7.8k Nov 29, 2021
Analytics middleware for Redux

redux-analytics Analytics middleware for Redux. $ npm install --save redux-analytics Want to customise your metadata further? Check out redux-tap. Usa

Mark Dalgleish 491 Nov 12, 2021