mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-23 01:56:52 +03:00
b82de74592
* 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
102 lines
3.7 KiB
Markdown
102 lines
3.7 KiB
Markdown
# Redux DevTools RTK Query inspector monitor
|
|
|
|
A monitor that displays [RTK query](https://redux-toolkit.js.org/rtk-query/overview) queries and mutations for [Redux DevTools](https://github.com/gaearon/redux-devtools).
|
|
|
|
Created by [FaberVitale](https://github.com/FaberVitale), inspired by [react-query devtools](https://github.com/tannerlinsley/react-query/tree/master/devtools).
|
|
|
|
## Demo
|
|
|
|
- [link](https://rtk-query-monitor-demo.netlify.app/)
|
|
- [demo source](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-rtk-query-monitor/demo)
|
|
|
|
## Preview
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
### npm
|
|
|
|
```bash
|
|
npm i @redux-devtools/rtk-query-monitor --save
|
|
```
|
|
|
|
### yarn
|
|
|
|
```bash
|
|
yarn add @redux-devtools/rtk-query-monitor
|
|
```
|
|
|
|
## Usage
|
|
|
|
You can use `RtkQueryMonitor` as the only monitor in your app:
|
|
|
|
#### `containers/DevTools.js`
|
|
|
|
```ts
|
|
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`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
|
|
|
|
### See also
|
|
|
|
- [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
|
|
|
|
- [Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
|
|
|
|
- [Redux Devtools walkthrough](https://github.com/reduxjs/redux-devtools/tree/master/docs/Walkthrough.md)
|
|
|
|
## 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](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js). |
|
|
| `invertTheme` | Boolean value that will invert the colors of the selected theme. Optional. By default, set to `false` |
|
|
|
|
<br/>
|
|
|
|
### Development
|
|
|
|
#### Start Demo
|
|
|
|
```bash
|
|
yarn lerna run start --stream --scope @redux-devtools/rtk-query-monitor
|
|
```
|
|
|
|
<br/>
|
|
|
|
## License
|
|
|
|
[MIT](./LICENSE.md)
|