reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-26 07:59:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

docs(rtk-query): add proper README

Browse Source 
Other changes:

* fix examples/rtk-query-poilling
This commit is contained in:
FaberVitale 2021-06-17 18:00:45 +02:00
parent 25dadc33d0
commit b7d9f229db
11 changed files with 82 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/redux-devtools-rtk-query-inspector-monitor/README.md
View File

@ -1,21 +1,21 @@
# Redux DevTools Chart Monitor
# Redux DevTools RTK Query inspector monitor
A chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools).
Displays rtk-query queries and mutations for [Redux DevTools](https://github.com/gaearon/redux-devtools).
Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/redux-devtools-chart-monitor`](https://github.com/reduxjs/redux-devtools-chart-monitor).
Created by [FaberVitale](https://github.com/FaberVitale)
It shows a real-time view of the store aka the current state of the app.
:rocket: Now with immutable-js support.
[Demo](http://romseguy.github.io/redux-store-visualizer/) [(Source)](https://github.com/romseguy/redux-store-visualizer)
![Chart Monitor](https://camo.githubusercontent.com/19aebaeba929e97f97225115c49dc994299cb76e/687474703a2f2f692e696d6775722e636f6d2f4d53677655366c2e676966)
![RTK Query inspector monitor demo](./monitor-demo.gif)
### Installation
```
yarn add @redux-devtools/chart-monitor
```bash
npm i @redux-devtools/rtk-query-inspector-monitor --save # npm
# or
yarn add @redux-devtools/rtk-query-inspector-monitor # yarn
```
### Usage
@ -24,12 +24,12 @@ You can use `ChartMonitor` as the only monitor in your app:
##### `containers/DevTools.js`
```js
```ts
import React from 'react';
import { createDevTools } from '@redux-devtools/core';
import ChartMonitor from '@redux-devtools/chart-monitor';
import RtkQueryInspectorMonitor from '@redux-devtools/rtk-query-inspector-monitor';
export default createDevTools(<ChartMonitor />);
export default createDevTools(<RtkQueryInspectorMonitor />);
```
Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
@ -39,32 +39,12 @@ Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tre
[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
### Features
### Props
#### ChartMonitor props
You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below:
| Name | Description |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultIsVisible` | By default, set to `true`. |
| `transitionDuration` | By default, set to `750`, in milliseconds. |
| `heightBetweenNodesCoeff` | By default, set to `1`. |
| `widthBetweenNodesCoeff` | By default, set to `1.3`. |
| `isSorted` | By default, set to `false`. |
| `style` | {<br>&nbsp;&nbsp;width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br>&nbsp;&nbsp;text: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0D`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hover: `theme.base06`<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;node: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsed: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent: `theme.base0E`<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;radius: 7<br>&nbsp;&nbsp;}<br>} |
| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |
| `tooltipOptions` | {<br>&nbsp;&nbsp;disabled: false,<br>&nbsp;&nbsp;indentationSize: 2,<br>&nbsp;&nbsp;style: {<br>&nbsp;&nbsp;&nbsp;&nbsp;'background-color': `theme.base06`,<br>&nbsp;&nbsp;&nbsp;&nbsp;'opacity': '0.7',<br>&nbsp;&nbsp;&nbsp;&nbsp;'border-radius': '5px',<br>&nbsp;&nbsp;&nbsp;&nbsp;'padding': '5px'<br>&nbsp;&nbsp;}<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |
#### 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` |
| `select` | A function that selects the slice of the state for DevTools to show. For example, `state => state.thePart.iCare.about`. Optional. By default, set to `state => state`. |
### License

32
packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md
View File

@ -1,25 +1,23 @@
# New Project
# RTK Query Inspector monitor demo
> ✨ Bootstrapped with Create Snowpack App (CSA).
## Running demo
## Available Scripts
### npm start
### Working directory
Run the following commands from redux-devtools monorepo root directory.
Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
### 1. Install depedencies
### npm run build
```bash
yarn
```
Builds a static copy of your site to the `build/` folder.
Your app is ready to be deployed!
### 2. Start demo
**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.mjs` config file.
### npm test
Launches the application test runner.
Run with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode.
```bash
# working directory is monorepo root
yarn lerna run --parallel start \
--scope '@redux-devtools/rtk-query-inspector-monitor' \
--scope 'rtk-query-imspector-monitor-demo'
```

BIN
packages/redux-devtools-rtk-query-inspector-monitor/monitor-demo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

9
packages/redux-devtools-rtk-query-inspector-monitor/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@redux-devtools/rtk-query-inspector-monitor",
"version": "1.0.0",
"description": "rtk-query Monitor for Redux DevTools",
"description": "rtk-query monitor for Redux DevTools",
"keywords": [
"redux",
"devtools",
@ -10,12 +10,15 @@
"redux-toolkit",
"rtk-query"
],
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-chart-monitor",
"homepage": "https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-inspector-monitor",
"bugs": {
"url": "https://github.com/reduxjs/redux-devtools/issues"
},
"license": "MIT",
"author": "FaberVitale",
"author": {
"name": "FaberVitale",
"url": "https://github.com/FaberVitale"
},
"files": [
"lib",
"src"

6
packages/redux-devtools-rtk-query-inspector-monitor/src/selectors.ts
View File

@ -85,13 +85,15 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
}
);
const selectComparatorOrder = ({ monitorState }: SelectorsSource<S>) =>
monitorState.queryForm.values.isAscendingQueryComparatorOrder;
const selectAllVisbileQueries = createSelector(
[
selectQueryComparator,
selectQueryListFilter,
selectAllQueries,
({ monitorState }: SelectorsSource<S>) =>
monitorState.queryForm.values.isAscendingQueryComparatorOrder,
selectComparatorOrder,
selectSearchQueryRegex,
],
(comparator, queryListFilter, queryList, isAscending, searchRegex) => {

7
packages/redux-devtools/examples/rtk-query-polling/package.json
View File

@ -3,12 +3,11 @@
"version": "1.0.0",
"private": true,
"description": "A redux app powered by rtk-query connected via remote-redux-devtools",
"keywords": [],
"main": "src/index.tsx",
"dependencies": {
"@reduxjs/toolkit": "^1.6.0",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-redux": "7.2.2",
"react-scripts": "4.0.2",
"remote-redux-devtools": "0.5.16"
@ -17,7 +16,7 @@
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0",
"@types/react-redux": "7.1.9",
"typescript": "4.1.3"
"typescript": "4.3.2"
},
"eslintConfig": {
"extends": [

4
packages/redux-devtools/examples/rtk-query-polling/src/App.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import * as React from 'react';
import { Pokemon } from './Pokemon'
import { PokemonName, POKEMON_NAMES } from './pokemon.data'
import './styles.css'
@ -7,7 +7,7 @@ const getRandomPokemonName = () =>
POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)]
export default function App() {
const [pokemon, setPokemon] = useState<PokemonName[]>(['bulbasaur'])
const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur'])
return (
<div className="App">

10
packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx
View File

@ -1,8 +1,6 @@
import { useState, version } from 'react'
import { useGetPokemonByNameQuery } from './services/pokemon'
import type { PokemonName } from './pokemon.data'
console.log(version);
import * as React from 'react';
import { useGetPokemonByNameQuery } from './services/pokemon';
import type { PokemonName } from './pokemon.data';
const intervalOptions = [
{ label: 'Off', value: 0 },
@ -16,7 +14,7 @@ const getRandomIntervalValue = () =>
intervalOptions[Math.floor(Math.random() * intervalOptions.length)].value
export function Pokemon({ name }: { name: PokemonName }) {
const [pollingInterval, setPollingInterval] = useState(
const [pollingInterval, setPollingInterval] = React.useState(
getRandomIntervalValue()
)

1
packages/redux-devtools/examples/rtk-query-polling/src/index.tsx
View File

@ -1,3 +1,4 @@
import * as React from 'react';
import { render } from 'react-dom'
import { Provider } from 'react-redux';
import App from './App'

15
packages/redux-devtools/examples/rtk-query-polling/tsconfig.json
View File

@ -1,25 +1,22 @@
{
"extends": "../../../../tsconfig.react.base.json",
"include": [
"./src/**/*"
"src"
],
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"lib": [
"dom",
"es2015"
"dom.iterable",
"esnext"
],
"jsx": "react-jsx",
"target": "es5",
"allowJs": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
"noEmit": true,
"jsx": "react-jsx"
}
}

74
yarn.lock
View File

@ -24378,7 +24378,7 @@ fsevents@^1.2.7:
languageName: unknown
linkType: soft
"react-dom@npm:^16.14.0, react-dom@npm:^16.3.0":
"react-dom@npm:^16.14.0":
version: 16.14.0
resolution: "react-dom@npm:16.14.0"
dependencies:
@ -24392,7 +24392,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
"react-dom@npm:^17.0.2":
"react-dom@npm:^17.0.0, react-dom@npm:^17.0.2":
version: 17.0.2
resolution: "react-dom@npm:17.0.2"
dependencies:
@ -24879,7 +24879,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
"react@npm:^16.13.1, react@npm:^16.14.0, react@npm:^16.3.0":
"react@npm:^16.13.1, react@npm:^16.14.0":
version: 16.14.0
resolution: "react@npm:16.14.0"
dependencies:
@ -24890,7 +24890,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
"react@npm:^17.0.2":
"react@npm:^17.0.0, react@npm:^17.0.2":
version: 17.0.2
resolution: "react@npm:17.0.2"
dependencies:
@ -26192,12 +26192,12 @@ resolve@^2.0.0-next.3:
"@types/react": 17.0.0
"@types/react-dom": 17.0.0
"@types/react-redux": 7.1.9
react: ^16.3.0
react-dom: ^16.3.0
react: ^17.0.0
react-dom: ^17.0.0
react-redux: 7.2.2
react-scripts: 4.0.2
remote-redux-devtools: 0.5.16
typescript: 4.1.3
typescript: 4.3.2
languageName: unknown
linkType: soft
@ -29274,16 +29274,6 @@ resolve@^2.0.0-next.3:
languageName: node
linkType: hard
typescript@4.1.3:
version: 4.1.3
resolution: "typescript@npm:4.1.3"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 4f7ab1506ea22c7a1c313ec5b4285e93ce08d709ad6086d02d3096adb399ca339972ee56d1e578213c51dd0fb7b0fad50283c2d3c39642405644458ae29774f8
languageName: node
linkType: hard
typescript@4.3.2:
version: 4.3.2
resolution: "typescript@npm:4.3.2"
@ -29294,16 +29284,6 @@ typescript@4.3.2:
languageName: node
linkType: hard
typescript@^3.9.7:
version: 3.9.10
resolution: "typescript@npm:3.9.10"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 544f3810ac3d3fcd141907e7f52f0b8c70af178adc83af47e2b8a48351e5a119919a4d3bfbe2f62d5165b5aa203e896fe0432024cfbda670dbd03a4f53ce7748
languageName: node
linkType: hard
typescript@^4.3.4:
version: 4.3.4
resolution: "typescript@npm:4.3.4"
@ -29314,16 +29294,6 @@ typescript@^4.3.4:
languageName: node
linkType: hard
"typescript@patch:typescript@4.1.3#builtin<compat/typescript>":
version: 4.1.3
resolution: "typescript@patch:typescript@npm%3A4.1.3#builtin<compat/typescript>::version=4.1.3&hash=ddfc1b"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 28f0f616bf6284543bb14d4bfe0e1a74963e5df0396ebccfc6a57bfd4ab70b4284e51b3a2045ed2466151a4a58c8a549edb886a2f7a2232cf08fcf73496592e6
languageName: node
linkType: hard
"typescript@patch:typescript@4.3.2#builtin<compat/typescript>":
version: 4.3.2
resolution: "typescript@patch:typescript@npm%3A4.3.2#builtin<compat/typescript>::version=4.3.2&hash=ddfc1b"
@ -29334,16 +29304,6 @@ typescript@^4.3.4:
languageName: node
linkType: hard
"typescript@patch:typescript@^3.9.7#builtin<compat/typescript>":
version: 3.9.10
resolution: "typescript@patch:typescript@npm%3A3.9.10#builtin<compat/typescript>::version=3.9.10&hash=ddfc1b"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 744dab471ae59659b1618be636ab56b9c0afbca801e0640c3cdfad0a894315c87d30a290b7063c6a3f1860bf47fe44d9188cb85e46b2bdadda7f207d67e6b4e1
languageName: node
linkType: hard
"typescript@patch:typescript@^4.3.4#builtin<compat/typescript>":
version: 4.3.4
resolution: "typescript@patch:typescript@npm%3A4.3.4#builtin<compat/typescript>::version=4.3.4&hash=ddfc1b"
@ -29354,6 +29314,26 @@ typescript@^4.3.4:
languageName: node
linkType: hard
"typescript@patch:typescript@~4.0.7#builtin<compat/typescript>":
version: 4.0.8
resolution: "typescript@patch:typescript@npm%3A4.0.8#builtin<compat/typescript>::version=4.0.8&hash=ddfc1b"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: d12e73e6fb00f0ed42b10b42493d2eb907f31b8c6eb6cfb896be45d79d8fcbf46c9bc1e2aced88898f91191e3f49c5a13d3f86d01bb386ee29f502c7ccfe0b6a
languageName: node
linkType: hard
typescript@~4.0.7:
version: 4.0.8
resolution: "typescript@npm:4.0.8"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: f7789f9c531dffcf4c849a806627562ad6297f608aab85c0514d87a2ab3e060bcfadd63963735994796c45326eebeb479c004065af47e72ee44ba8c935fc9a54
languageName: node
linkType: hard
"uglify-js@npm:^2.6.1":
version: 2.8.29
resolution: "uglify-js@npm:2.8.29"