Skip to content

Commit 1edfea2

Browse files
committed
https://github.com/reduxjs/redux-devtools/issues/1000
0 parents  commit 1edfea2

10 files changed

+125
-0
lines changed

.idea/.gitignore

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/misc.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Redux DevTools Issue 1000
2+
3+
https://github.com/reduxjs/redux-devtools/issues/1000
4+
5+
To reproduce:
6+
- Make sure you've installed the redux devtools on your browser (chrome, brave, ...)
7+
- Fire up your webserver of choice on the root of this project directory (e.g. `python -m SimpleHTTPServer 8000`)
8+
- If you serve from disk, the extension may not be enabled for the page
9+
- Go to the index.html
10+
- Open the Redux DevTools
11+
- Notice there are 2 instances: "Top window" and "Iframe window"
12+
- Select the "Iframe window"
13+
- Dispatch an action from either frame using the "Dispatch action" that's on either page.
14+
- Notice the instance switcher changed back to "Top window"
15+
- It is irrelevant where abouts the action came from, dispatching from top or iframe resets the instance switcher to look at the top window

iframe.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Dev tools issue # 1000</title>
6+
</head>
7+
<body>
8+
<h1>Iframe window</h1>
9+
<div>Count is: <span id="state"></span></div>
10+
<button onclick="increment()">Dispatch action</button>
11+
<script src="https://unpkg.com/[email protected]"></script>
12+
<script src="./iframe.js"></script>
13+
</body>
14+
</html>

iframe.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const { createStore } = window.Redux;
2+
3+
function counterReducer(state = { value: 0 }, action) {
4+
switch (action.type) {
5+
case 'counter/incremented':
6+
return { value: state.value + 1 }
7+
case 'counter/decremented':
8+
return { value: state.value - 1 }
9+
default:
10+
return state
11+
}
12+
}
13+
14+
let store = createStore(counterReducer, window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
15+
name: 'Iframe window'
16+
})())
17+
18+
let increment = () => store.dispatch({ type: 'counter/incremented' });
19+
let onAction = () => document.getElementById('state').innerText = store.getState().value;
20+
21+
store.subscribe(onAction);
22+
23+
onAction();

index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Dev tools issue # 1000</title>
6+
</head>
7+
<body>
8+
<h1>Top window</h1>
9+
<div>Count is: <span id="state"></span></div>
10+
<button onclick="increment()">Dispatch action</button>
11+
<iframe src="./iframe.html"></iframe>
12+
<script src="https://unpkg.com/[email protected]"></script>
13+
<script src="./index.js"></script>
14+
</body>
15+
</html>

index.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const { createStore } = window.Redux;
2+
3+
function counterReducer(state = { value: 0 }, action) {
4+
switch (action.type) {
5+
case 'counter/incremented':
6+
return { value: state.value + 1 }
7+
case 'counter/decremented':
8+
return { value: state.value - 1 }
9+
default:
10+
return state
11+
}
12+
}
13+
14+
let store = createStore(counterReducer, window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
15+
name: 'Top window'
16+
})())
17+
18+
let increment = () => store.dispatch({ type: 'counter/incremented' });
19+
let onAction = () => document.getElementById('state').innerText = store.getState().value;
20+
21+
store.subscribe(onAction);
22+
23+
onAction();

package.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "redux-devtools-issue-1000",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"dependencies": {}
7+
}

0 commit comments

Comments
 (0)