react/redux toolkit fetching data - when refresh the page the state gone - reactjs

Question

I am creating a react/redux toolkit app , I am saving data into redux , this is like a posts page and when user clicks a post it goes to single post page,
the data is saving in redux state and working fine, but when I refresh the detail page the redux data is gone not sure why its happening I want to keep data even if user refresh the page also.
my posts slice
import {
createSlice,
// createSelector,
// PayloadAction,
createAsyncThunk,
} from "#reduxjs/toolkit";
import axios from "axios";
export const fetchAllPostsAsync = createAsyncThunk(
"posts/fetchAllPostsAsync",
async (_, thunkAPI) => {
try {
const response = await axios.get("http://localhost:5000/posts/");
return response.data;
} catch (error) {
throw thunkAPI.rejectWithValue({ error: error.message });
}
}
);
export const postsSlice = createSlice({
name: "posts",
initialState: {
allposts: [],
loading: "idle",
error: "",
selectedPost: {},
},
reducers: {
selectedpost: (state, action) => {
state.selectedPost = action.payload;
},
},
extraReducers: (builder) => {
builder.addCase(fetchAllPostsAsync.pending, (state, action) => {
state.allposts = [];
state.loading = "Loading";
});
builder.addCase(fetchAllPostsAsync.fulfilled, (state, action) => {
state.allposts = action.payload;
state.loading = "loaded";
});
builder.addCase(fetchAllPostsAsync.rejected, (state, action) => {
state.allposts = "data not loaded";
state.loading = "error";
state.error = action.error.message;
});
},
});
export const { selectedpost } = postsSlice.actions;
export default postsSlice.reducer;
my posts page
import React, { useEffect } from "react";
import SinglePost from "./SinglePost";
import { useSelector, useDispatch } from "react-redux";
import { fetchAllPostsAsync } from "../features/posts/postsSlice";
const Posts = () => {
const dispatch = useDispatch();
const posts = useSelector((state) => state.posts.allposts);
console.log(posts);
useEffect(() => {
dispatch(fetchAllPostsAsync());
}, [dispatch]);
return (
<div>
<button>Add new </button>
{posts?.map(({ _id, ...rest }) => (
<SinglePost key={_id} rest={rest} id={_id} />
))}
</div>
);
};
export default Posts;
my details page
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { selectedpost } from "../features/posts/postsSlice";
const Details = () => {
const { postId } = useParams();
const [postshere, setPostshere] = useState(selectedpost);
const dispatch = useDispatch();
const posts = useSelector((state) => state.posts.allposts);
const selectedpostsingle = useSelector((state) => state.posts.selectedPost);
const selectedPostArray = posts?.filter((post) => post._id === postId);
useEffect(() => {
dispatch(selectedpost(setPostshere(selectedPostArray[0])));
}, [dispatch]);
console.log(postId, "ffffff");
return (
<div>
<div key={postshere._id}>
{postshere.title} {postshere.message}
</div>
</div>
);
};
export default Details;
this is single post page
import React from "react";
import { Link } from "react-router-dom";
const SinglePost = ({ rest, id }) => {
// let history = useHistory();
// function handleClick() {
// history.push(`/${rest._id}`);
// }
console.log(rest);
return (
<Link to={`/details/${id}`}>
<div className="post">
<div className="post__title">{rest.title}</div>
<div className="post__body">{rest.message}</div>
<div className="post__body">{rest.date}</div>
</div>
</Link>
);
};
export default SinglePost;
error message
×
TypeError: Cannot read property 'title' of undefined
Details
src/components/Details.js:20
17 | console.log(postId, "ffffff");
18 | return (
19 | <div>
> 20 | <div key={postshere._id}>
| ^ 21 | {postshere.title} {postshere.message}
22 | </div>
23 | </div>
View compiled