mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-12-01 05:53:52 +03:00

* Use rollup for d3tooltip

* Use rollup for map2tree

* Set moduleResolution

* Use rollup for d3-state-visualizer

* Use rollup for react-base16-styling

* Use rollup for react-dock

* Use rollup for react-json-tree

* Use rollup for redux-devtools

* Use rollup for redux-devtools-intrument

* Use rollup for redux-devtools-chart-monitor

* Update export

* Use rollup for redux-devtools-dock-monitor

* Use rollup for redux-devtools-inspector-monitor

* Fix inspector demo

* Fix invalid eslint config

* Use rollup for inspector-monitor-test-tab

* Use rollup for inspector-monitor-trace-tab

* Use rollup for redux-devtools-log-monitor

* Use rollup for redux-devtools-remote

* Use rollup in redux-devtools-rtk-query-monitor

* Use rollup for redux-devtools-serialize

* Fix redux-devtools examples

* Use rollup for redux-devtools-slider-monitor

* Fix slider examples

* Use rollup for redux-devtools-ui

* Use rollup for redux-devtools-utils

* Use rollup for redux-devtools-extension

* Use rollup for redux-devtools-app

* Fix Webpack app build

* Fix extension build

* Turn on minimization

* Update CLI

2022-01-10 15:41:53 +00:00

3.7 KiB

Raw Blame History

Redux DevTools RTK Query inspector monitor

A monitor that displays RTK query queries and mutations for Redux DevTools.

Created by FaberVitale, inspired by react-query devtools.

Demo

Preview

Installation

npm

npm i @redux-devtools/rtk-query-monitor --save

yarn

yarn add @redux-devtools/rtk-query-monitor

Usage

You can use RtkQueryMonitor as the only monitor in your app:

`containers/DevTools.js`

import React from 'react';
import { createDevTools } from '@redux-devtools/core';
import { RtkQueryrMonitor } from '@redux-devtools/rtk-query-monitor';

export default createDevTools(<RtkQueryrMonitor />);

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

Alternatively, you can use it together with DockMonitor to make it dockable.

Features

sorts active queries and mutations in ascending or descending order by:
- fulfilledTimeStamp
- query key
- query status
- endpoint
- api reducerPath
filters active queries and mutations by:
- fulfilledTimeStamp
- query key
- query status
- endpoint
- api reducerPath
toggleable regular expression search
Displays
- status flags
- query state
- tags
- subscriptions
- api state
- api stats
- actions relevant to the selected query or mutation

Redux DevTools props

Name	Description
`theme`	Either a string referring to one of the themes provided by redux-devtools-themes (feel free to contribute!) or a custom object of the same format. Optional. By default, set to `'nicinabox'`.
`invertTheme`	Boolean value that will invert the colors of the selected theme. Optional. By default, set to `false`

Development

Start Demo

yarn lerna run start --stream --scope @redux-devtools/rtk-query-monitor

License

MIT

3.7 KiB Raw Blame History