Currently, I am experimenting with example code for redux toolkit (counter) in NextJS and attempting to store state in sessionStorage. While the functionality is working as expected, I encountered a warning message in the console:
"Warning: Text content did not match. Server: "0" Client: "25"Below is my redux store setup:
import counterReducer from "./counterSlice";
const initValue = () => {
let value = 0;
if (typeof window !== "undefined") {
if (sessionStorage.getItem("counter")) {
value = sessionStorage.getItem("counter");
}
}
return parseInt(value);
};
const preloadedState = {
counter: {
value: initValue(),
},
};
export default configureStore({
reducer: {
counter: counterReducer,
},
preloadedState,
});
Additionally, here is the code snippet from my Page component:
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import useSWR from "swr";
import { decrement, increment, incrementByAmount, incrementAsync, selectCount } from "../redux/counterSlice";
export default function Counter() {
let count = useSelector(selectCount);
const dispatch = useDispatch();
return (
<Layout>
<div style={{ display: "grid", placeContent: "center", textAlign: "center" }}>
<h1>Counter</h1>
<div style={{ display: "grid", gridAutoFlow: "column", gap: 50 }}>
<button onClick={() => dispatch(increment())}>Inc</button>
<h4>{count}</h4>
<button onClick={() => dispatch(decrement())}>Dec</button>
</div>
</div>
</Layout>
);
}
If anyone has come across a solution for this particular warning issue, I would greatly appreciate the assistance.