mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-27 00:19:55 +03:00
chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling
This commit is contained in:
FaberVitale
parent
1a482e78bb
commit
0ae7deb8d6
|
|
@ -1,4 +0,0 @@
|
||||||
SKIP_PREFLIGHT_CHECK=true
|
|
||||||
REACT_APP_REMOTE_DEV_TOOLS_PORT=8000
|
|
||||||
REACT_APP_REMOTE_DEV_TOOLS_HOST=localhost
|
|
||||||
PORT=3002
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
.yarn/*
|
|
||||||
build
|
|
||||||
node_modules
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
# rtk-query polling example
|
|
||||||
|
|
||||||
## Description
|
|
||||||
|
|
||||||
A copy of https://github.com/reduxjs/redux-toolkit/tree/master/examples/query/react/polling that
|
|
||||||
adds a connection via `remote-redux-devtools` to a devtools server.
|
|
||||||
|
|
||||||
## Run example
|
|
||||||
|
|
||||||
Runs the example at `localhost:3002`, `devtools-app` at `localhost:3000` and remote server at `8000`.
|
|
||||||
|
|
||||||
1. Install local dependencies
|
|
||||||
|
|
||||||
```bash
|
|
||||||
yarn exec --cwd 'packages/redux-devtools/examples/rtk-query-polling' yarn
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Start example
|
|
||||||
|
|
||||||
```bash
|
|
||||||
yarn exec --cwd 'packages/redux-devtools/examples/rtk-query-polling' yarn start
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Start devtools in another shell
|
|
||||||
|
|
||||||
```bash
|
|
||||||
yarn lerna run --parallel start --scope '@redux-devtools/app' --scope '@redux-devtools/cli'
|
|
||||||
```
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
{
|
|
||||||
"name": "rtk-query-polling",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"private": true,
|
|
||||||
"description": "A redux app powered by rtk-query connected via remote-redux-devtools",
|
|
||||||
"main": "src/index.tsx",
|
|
||||||
"dependencies": {
|
|
||||||
"@reduxjs/toolkit": "^1.6.0",
|
|
||||||
"react": "^17.0.0",
|
|
||||||
"react-dom": "^17.0.0",
|
|
||||||
"react-redux": "7.2.2",
|
|
||||||
"remote-redux-devtools": "0.5.16"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/react": "17.0.0",
|
|
||||||
"@types/react-dom": "17.0.0",
|
|
||||||
"@types/react-redux": "7.1.9",
|
|
||||||
"react-scripts": "4.0.3",
|
|
||||||
"typescript": "4.3.2"
|
|
||||||
},
|
|
||||||
"eslintConfig": {
|
|
||||||
"extends": [
|
|
||||||
"react-app"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "react-scripts start",
|
|
||||||
"build": "react-scripts build"
|
|
||||||
},
|
|
||||||
"browserslist": [
|
|
||||||
">0.2%",
|
|
||||||
"not dead",
|
|
||||||
"not ie <= 11",
|
|
||||||
"not op_mini all"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
|
||||||
/>
|
|
||||||
<meta name="theme-color" content="#000000" />
|
|
||||||
<!--
|
|
||||||
manifest.json provides metadata used when your web app is added to the
|
|
||||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
|
||||||
-->
|
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
||||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
||||||
<!--
|
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
|
||||||
Only files inside the `public` folder can be referenced from the HTML.
|
|
||||||
|
|
||||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
|
||||||
-->
|
|
||||||
<title>React App</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<noscript> You need to enable JavaScript to run this app. </noscript>
|
|
||||||
<div id="root"></div>
|
|
||||||
<!--
|
|
||||||
This HTML file is a template.
|
|
||||||
If you open it directly in the browser, you will see an empty page.
|
|
||||||
|
|
||||||
You can add webfonts, meta tags, or analytics to this file.
|
|
||||||
The build step will place the bundled scripts into the <body> tag.
|
|
||||||
|
|
||||||
To begin the development, run `npm start` or `yarn start`.
|
|
||||||
To create a production bundle, use `npm run build` or `yarn build`.
|
|
||||||
-->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
{
|
|
||||||
"short_name": "RTK Query Polling Example",
|
|
||||||
"name": "Polling Example",
|
|
||||||
"start_url": ".",
|
|
||||||
"display": "standalone",
|
|
||||||
"theme_color": "#000000",
|
|
||||||
"background_color": "#ffffff"
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import { Pokemon } from './Pokemon';
|
|
||||||
import { PokemonName, POKEMON_NAMES } from './pokemon.data';
|
|
||||||
import './styles.css';
|
|
||||||
|
|
||||||
const getRandomPokemonName = () =>
|
|
||||||
POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)];
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur']);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setPokemon((prev) => [...prev, getRandomPokemonName()])
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Add random pokemon
|
|
||||||
</button>
|
|
||||||
<button onClick={() => setPokemon((prev) => [...prev, 'bulbasaur'])}>
|
|
||||||
Add bulbasaur
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{pokemon.map((name, index) => (
|
|
||||||
<Pokemon key={index} name={name} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import { useGetPokemonByNameQuery } from './services/pokemon';
|
|
||||||
import type { PokemonName } from './pokemon.data';
|
|
||||||
|
|
||||||
const intervalOptions = [
|
|
||||||
{ label: 'Off', value: 0 },
|
|
||||||
{ label: '3s', value: 3000 },
|
|
||||||
{ label: '5s', value: 5000 },
|
|
||||||
{ label: '10s', value: 10000 },
|
|
||||||
{ label: '1m', value: 60000 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const getRandomIntervalValue = () =>
|
|
||||||
intervalOptions[Math.floor(Math.random() * intervalOptions.length)].value;
|
|
||||||
|
|
||||||
export function Pokemon({ name }: { name: PokemonName }) {
|
|
||||||
const [pollingInterval, setPollingInterval] = React.useState(
|
|
||||||
getRandomIntervalValue()
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data, error, isLoading, isFetching, refetch } =
|
|
||||||
useGetPokemonByNameQuery(name, {
|
|
||||||
pollingInterval,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
float: 'left',
|
|
||||||
textAlign: 'center',
|
|
||||||
...(isFetching ? { background: '#e6ffe8' } : {}),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error ? (
|
|
||||||
<>Oh no, there was an error loading {name}</>
|
|
||||||
) : isLoading ? (
|
|
||||||
<>Loading...</>
|
|
||||||
) : data ? (
|
|
||||||
<>
|
|
||||||
<h3>{data.species.name}</h3>
|
|
||||||
<div style={{ minWidth: 96, minHeight: 96 }}>
|
|
||||||
<img
|
|
||||||
src={data.sprites.front_shiny}
|
|
||||||
alt={data.species.name}
|
|
||||||
style={{ ...(isFetching ? { opacity: 0.3 } : {}) }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label style={{ display: 'block' }}>Polling interval</label>
|
|
||||||
<select
|
|
||||||
value={pollingInterval}
|
|
||||||
onChange={({ target: { value } }) =>
|
|
||||||
setPollingInterval(Number(value))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{intervalOptions.map(({ label, value }) => (
|
|
||||||
<option key={value} value={value}>
|
|
||||||
{label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button onClick={refetch} disabled={isFetching}>
|
|
||||||
{isFetching ? 'Loading' : 'Manually refetch'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
'No Data'
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import { render } from 'react-dom';
|
|
||||||
import { Provider } from 'react-redux';
|
|
||||||
import App from './App';
|
|
||||||
import { store } from './store';
|
|
||||||
|
|
||||||
const rootElement = document.getElementById('root');
|
|
||||||
|
|
||||||
render(
|
|
||||||
<Provider store={store}>
|
|
||||||
<App />
|
|
||||||
</Provider>,
|
|
||||||
rootElement
|
|
||||||
);
|
|
||||||
|
|
@ -1,155 +0,0 @@
|
||||||
export const POKEMON_NAMES = [
|
|
||||||
'bulbasaur',
|
|
||||||
'ivysaur',
|
|
||||||
'venusaur',
|
|
||||||
'charmander',
|
|
||||||
'charmeleon',
|
|
||||||
'charizard',
|
|
||||||
'squirtle',
|
|
||||||
'wartortle',
|
|
||||||
'blastoise',
|
|
||||||
'caterpie',
|
|
||||||
'metapod',
|
|
||||||
'butterfree',
|
|
||||||
'weedle',
|
|
||||||
'kakuna',
|
|
||||||
'beedrill',
|
|
||||||
'pidgey',
|
|
||||||
'pidgeotto',
|
|
||||||
'pidgeot',
|
|
||||||
'rattata',
|
|
||||||
'raticate',
|
|
||||||
'spearow',
|
|
||||||
'fearow',
|
|
||||||
'ekans',
|
|
||||||
'arbok',
|
|
||||||
'pikachu',
|
|
||||||
'raichu',
|
|
||||||
'sandshrew',
|
|
||||||
'sandslash',
|
|
||||||
'nidoran',
|
|
||||||
'nidorina',
|
|
||||||
'nidoqueen',
|
|
||||||
'nidoran',
|
|
||||||
'nidorino',
|
|
||||||
'nidoking',
|
|
||||||
'clefairy',
|
|
||||||
'clefable',
|
|
||||||
'vulpix',
|
|
||||||
'ninetales',
|
|
||||||
'jigglypuff',
|
|
||||||
'wigglytuff',
|
|
||||||
'zubat',
|
|
||||||
'golbat',
|
|
||||||
'oddish',
|
|
||||||
'gloom',
|
|
||||||
'vileplume',
|
|
||||||
'paras',
|
|
||||||
'parasect',
|
|
||||||
'venonat',
|
|
||||||
'venomoth',
|
|
||||||
'diglett',
|
|
||||||
'dugtrio',
|
|
||||||
'meowth',
|
|
||||||
'persian',
|
|
||||||
'psyduck',
|
|
||||||
'golduck',
|
|
||||||
'mankey',
|
|
||||||
'primeape',
|
|
||||||
'growlithe',
|
|
||||||
'arcanine',
|
|
||||||
'poliwag',
|
|
||||||
'poliwhirl',
|
|
||||||
'poliwrath',
|
|
||||||
'abra',
|
|
||||||
'kadabra',
|
|
||||||
'alakazam',
|
|
||||||
'machop',
|
|
||||||
'machoke',
|
|
||||||
'machamp',
|
|
||||||
'bellsprout',
|
|
||||||
'weepinbell',
|
|
||||||
'victreebel',
|
|
||||||
'tentacool',
|
|
||||||
'tentacruel',
|
|
||||||
'geodude',
|
|
||||||
'graveler',
|
|
||||||
'golem',
|
|
||||||
'ponyta',
|
|
||||||
'rapidash',
|
|
||||||
'slowpoke',
|
|
||||||
'slowbro',
|
|
||||||
'magnemite',
|
|
||||||
'magneton',
|
|
||||||
"farfetch'd",
|
|
||||||
'doduo',
|
|
||||||
'dodrio',
|
|
||||||
'seel',
|
|
||||||
'dewgong',
|
|
||||||
'grimer',
|
|
||||||
'muk',
|
|
||||||
'shellder',
|
|
||||||
'cloyster',
|
|
||||||
'gastly',
|
|
||||||
'haunter',
|
|
||||||
'gengar',
|
|
||||||
'onix',
|
|
||||||
'drowzee',
|
|
||||||
'hypno',
|
|
||||||
'krabby',
|
|
||||||
'kingler',
|
|
||||||
'voltorb',
|
|
||||||
'electrode',
|
|
||||||
'exeggcute',
|
|
||||||
'exeggutor',
|
|
||||||
'cubone',
|
|
||||||
'marowak',
|
|
||||||
'hitmonlee',
|
|
||||||
'hitmonchan',
|
|
||||||
'lickitung',
|
|
||||||
'koffing',
|
|
||||||
'weezing',
|
|
||||||
'rhyhorn',
|
|
||||||
'rhydon',
|
|
||||||
'chansey',
|
|
||||||
'tangela',
|
|
||||||
'kangaskhan',
|
|
||||||
'horsea',
|
|
||||||
'seadra',
|
|
||||||
'goldeen',
|
|
||||||
'seaking',
|
|
||||||
'staryu',
|
|
||||||
'starmie',
|
|
||||||
'mr. mime',
|
|
||||||
'scyther',
|
|
||||||
'jynx',
|
|
||||||
'electabuzz',
|
|
||||||
'magmar',
|
|
||||||
'pinsir',
|
|
||||||
'tauros',
|
|
||||||
'magikarp',
|
|
||||||
'gyarados',
|
|
||||||
'lapras',
|
|
||||||
'ditto',
|
|
||||||
'eevee',
|
|
||||||
'vaporeon',
|
|
||||||
'jolteon',
|
|
||||||
'flareon',
|
|
||||||
'porygon',
|
|
||||||
'omanyte',
|
|
||||||
'omastar',
|
|
||||||
'kabuto',
|
|
||||||
'kabutops',
|
|
||||||
'aerodactyl',
|
|
||||||
'snorlax',
|
|
||||||
'articuno',
|
|
||||||
'zapdos',
|
|
||||||
'moltres',
|
|
||||||
'dratini',
|
|
||||||
'dragonair',
|
|
||||||
'dragonite',
|
|
||||||
'mewtwo',
|
|
||||||
'mew',
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
export type PokemonName = typeof POKEMON_NAMES[number];
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
/// <reference types="react-scripts" />
|
|
||||||
|
|
||||||
declare module '@redux-devtools/app';
|
|
||||||
|
|
||||||
declare module 'remote-redux-devtools';
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
|
||||||
import type { PokemonName } from '../pokemon.data';
|
|
||||||
|
|
||||||
export const pokemonApi = createApi({
|
|
||||||
reducerPath: 'pokemonApi',
|
|
||||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
|
|
||||||
endpoints: (builder) => ({
|
|
||||||
getPokemonByName: builder.query({
|
|
||||||
query: (name: PokemonName) => `pokemon/${name}`,
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Export hooks for usage in functional components
|
|
||||||
export const { useGetPokemonByNameQuery } = pokemonApi;
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
import { configureStore } from '@reduxjs/toolkit';
|
|
||||||
import { pokemonApi } from './services/pokemon';
|
|
||||||
import devToolsEnhancer from 'remote-redux-devtools';
|
|
||||||
|
|
||||||
const remotePort = Number(process.env.REACT_APP_REMOTE_DEV_TOOLS_PORT) ?? 8000;
|
|
||||||
const remoteHostname =
|
|
||||||
process.env.REACT_APP_REMOTE_DEV_TOOLS_HOST ?? 'localhost';
|
|
||||||
|
|
||||||
export const store = configureStore({
|
|
||||||
reducer: {
|
|
||||||
[pokemonApi.reducerPath]: pokemonApi.reducer,
|
|
||||||
},
|
|
||||||
devTools: false,
|
|
||||||
// adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
|
|
||||||
middleware: (getDefaultMiddleware) =>
|
|
||||||
getDefaultMiddleware().concat(pokemonApi.middleware),
|
|
||||||
enhancers: [devToolsEnhancer({ port: remotePort, hostname: remoteHostname })],
|
|
||||||
});
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
.App {
|
|
||||||
font-family: sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "../../../../tsconfig.react.base.json",
|
|
||||||
"include": ["src"],
|
|
||||||
"compilerOptions": {
|
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
|
||||||
"allowJs": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"module": "esnext",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user