I'm using redux-toolkit
:
"react-redux": "^8.0.2",
"redux": "^4.2.0"
and I want to dispatch
an action
that passes an html element refrence as payload
:
<Stack aria-describedby={id} variant="contained" onClick={(e) => dispatch(open({ele: e.currentTarget}))}
//...
</Stack>
// slice
const initialState = {
anchorEl: null,
}
export const loginPopupSlice = createSlice({
name: 'loginPopup',
initialState,
reducers: {
open: (state,action) => {
state.anchorEl = action.payload.ele
},
close: (state) => {
state.anchorEl = null
}
}
})
but I get error that:
react_devtools_backend.js:4026 A non-serializable value was detected in the state, in the path: `loginPopup.anchorEl`. Value:
How can make payload for dispatch(open({ele: e.currentTarget}
serializable?
what i tried:
One way I think to do is to convert HTML Dom to string (because string is serializable) and vice versa. But is it good from performance view?
Notice:
redux dev tools does not work correctly with non-serializable values. So I hope with solving this problem I can make use of it