You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to use redux in background and popup, but there is a bug. After modifying the same redux state twice in the background, the second modification will not be captured by popup's useSelector
When I was troubleshooting the problem, I found that the state of the background store has changed, but the state of the popup is still the value that has been modified for the first time.
It is worth noting that he works stably and normally in chrome, but there will be problems in Safari
store.ts
//as same as with-redux template
reducer.ts
`
import { createSlice } from "@reduxjs/toolkit"
export interface CounterState {
enable: boolean
obj?: {
a: number
b?: {
c: number
d: string
}
}
}
When the two setTimeouts are executed, the redux in the background is obj: {
a: 2
b: {
c: 3
d:'hello again'
}
}
And the value of popup's redux is obj: {
a: 1
b: {
c: 2
d:'hello'
}
}
I tried my best to restore the scene code I encountered when I was working. I suspect that the obj in the count is a reference type. When the store resync in the background was not monitored by the popup, the redux of the popup was not updated. Would you give me some suggestions about it? I would thank it a lot.
This discussion was converted from issue #619 on June 09, 2023 03:04.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
What happened?
A bug happened!
I'm trying to use redux in background and popup, but there is a bug. After modifying the same redux state twice in the background, the second modification will not be captured by popup's useSelector
When I was troubleshooting the problem, I found that the state of the background store has changed, but the state of the popup is still the value that has been modified for the first time.
It is worth noting that he works stably and normally in chrome, but there will be problems in Safari
store.ts
//as same as with-redux template
reducer.ts
`
import { createSlice } from "@reduxjs/toolkit"
export interface CounterState {
enable: boolean
obj?: {
a: number
b?: {
c: number
d: string
}
}
}
const initialState: CounterState = {
enable: true
}
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
setObj: (
state,
{ payload: { a, c, d } }: { payload: { a: number; c: number; d: string } }
) => {
return {
...state,
obj: {
a,
b: {
c,
d
}
}
}
}
}
})
export const { setObj } = counterSlice.actions
export default counterSlice.reducer
`
// background.ts
`setTimeout(() => {
store.dispatch(
setObj({
a: 1,
c: 2,
d: "hello"
})
)
setTimeout(() => {
store.dispatch(
setObj({
a: 2,
c: 3,
d: "hello again"
})
)
}, 2000)
}, 3000)`
// popup.tsx
const count = useSelector(state => state.counter)
useEffect(() => {
console.log(count, store.getState())
}, [count])
When the two setTimeouts are executed, the redux in the background is obj: {
a: 2
b: {
c: 3
d:'hello again'
}
}
And the value of popup's redux is obj: {
a: 1
b: {
c: 2
d:'hello'
}
}
I tried my best to restore the scene code I encountered when I was working. I suspect that the obj in the count is a reference type. When the store resync in the background was not monitored by the popup, the redux of the popup was not updated. Would you give me some suggestions about it? I would thank it a lot.
Version
Latest
What OS are you seeing the problem on?
MacOSX
What browsers are you seeing the problem on?
Chrome, Safari
Relevant log output
No response
(OPTIONAL) Contribution
Code of Conduct
Beta Was this translation helpful? Give feedback.
All reactions