react/redux 工具包获取数据 - 刷新页面时状态消失

Question

我正在创建一个 react/redux 工具包应用程序，我正在将数据保存到 redux 中，这就像一个帖子页面，当用户点击一个帖子时，它会转到单个帖子页面，

数据以 redux 状态保存并且工作正常，但是当我刷新详细信息页面时，redux 数据消失了，不知道为什么会发生这种情况我想保留数据，即使用户也刷新页面。

我的帖子切片

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;

我的帖子页面

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;

我的详细信息页面

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;

这是单个帖子页面

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;

错误提示

×
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