页面转换时清除 redux 状态

Posted 2023-03-08

【中文标题】页面转换时清除 redux 状态

【英文标题】：Clear redux state when page transition

【发布时间】：2021-04-13 21:37:48

【问题描述】：

我做了一个博客并将单页状态存储到redux状态（singlePost）。当我转到特定的帖子页面时，将 singlePost 设置为帖子值。但是当我回到我的主页点击下一篇文章时，下一篇文章页面显示之前的值并立即转向新的值。

如果用户按下浏览器的返回按钮，我会尝试发送重置功能，但它似乎不起作用。有人可以指导我如何改进这一点吗？谢谢！

singlePostReducer.js

export const singlePostReducer = createSlice(
  name: "singlePost",
  initialState: 
    isLoadingPost: false,
    singlePost: "",
    newPostResponse: null,
  ,
  reducers: 
    setIsLoadingPost: (state, action) => 
      state.isLoadingPost = action.payload.isLoading;
    ,
    setSinglePost: (state, action) => 
      state.singlePost = action.payload;
    ,
    setNewPostResponse: (state, action) => 
      state.newPostResponse = action.payload;
    ,
    resetSinglePost: (state) => 
      state.singlePost = "";
    ,
  ,
);

SinglePost.js

 export default function PostPage() 
      const  id  = useParams();
      const singlePost = useSelector((store) => store.singlePost.singlePost);
      const  body, title, createdAt  = singlePost;
      const dispatch = useDispatch();
      const history = useHistory();

      //Does 
      if (history.goBack() || window.onpopstate) 
          dispatch(reset());
        

      useEffect(() => 
        dispatch(getSinglePost(id));
        
      , [id, dispatch]);
    
      return (
        <PostPageContainer>
          <h1>title</h1>
          <h4>new Date(createdAt).toLocaleString()</h4>
          <PostContent>body</PostContent>
        </PostPageContainer>
      );
    

【参考方案1】：

问题

//Does
if (history.goBack() || window.onpopstate) 
  dispatch(reset());

问题在于，正如所写，history.goBack() 总是会立即被调用。我不确定返回值是什么，但这与您无关。 window.onpopstate 需要分配一个回调才能工作，但这也不是你想要的，分配一个会覆盖全局值，根本不建议这样做。

解决方案

当组件卸载时，您可以从效果清理函数中调度您的休息操作。

export default function PostPage() 
  const  id  = useParams();
  const singlePost = useSelector((store) => store.singlePost.singlePost);
  const  body, title, createdAt  = singlePost;
  const dispatch = useDispatch();
  const history = useHistory();

  useEffect(() => 
    dispatch(getSinglePost(id));
  , [id, dispatch]);

  useEffect(() => 
    return () => dispatch(reset()); // <-- reset when unmounting
  , []);

  return (
    <PostPageContainer>
      <h1>title</h1>
      <h4>new Date(createdAt).toLocaleString()</h4>
      <PostContent>body</PostContent>
    </PostPageContainer>
  );