时间戳

首页 > 解决方案 > 更改页面时redux重置状态

javascript - 更改页面时redux重置状态

问题描述

在此处输入图像描述所以我用redux实现了无限滚动。一切正常，只是当我更改页面然后返回主页时，它会显示我之前向下滚动到的帖子。我的问题是，当我创建一个新帖子时，它一直显示在底部，因为它显示了以前的帖子，我首先向下滚动到新创建的帖子。我一直在这里搜索，对我来说唯一听起来合乎逻辑的事情就是重置组件卸载时的状态。我已经在我的操作中创建了它并将它添加到我的 useEffect 中，但它仍然不起作用。有没有办法当我离开我的主页时，它会重置，这样当我回到我的主页时，它会再次获取所有帖子？我卡住了。请帮忙

主页

const [page, setPage] = useState(1);
const dispatch = useDispatch();
const { loading, posts, total } = useSelector((state) => state.posts);

useEffect(() => {
    dispatch(getPosts(page));

    return () => {
      dispatch(resetPosts());
    };
  }, [dispatch, page]);

行动

export const getPosts = (page) => async (dispatch) => {
  try {
    const {
      data: { posts, totalPosts },
    } = await api.fetchPosts(page);

    dispatch({
      type: PC.FETCH_ALL_POSTS_SUCCESS,
      payload: { posts, totalPosts },
    });
  } catch (error) {
    dispatch({ type: PC.FETCH_ALL_POSTS_FAIL, payload: error.response });
  }
};
export const resetPosts = () => {
  return { type: PC.RESET_POSTS };
};

减速机

export const postsReducer = (state = { posts: [] }, action) => {
  switch (action.type) {
    case PC.FETCH_ALL_POSTS_REQUEST:
      return { loading: true };
    case PC.FETCH_ALL_POSTS_SUCCESS:
      return {
        loading: false,
        posts: [...state.posts, ...action.payload.posts],
        total: action.payload.totalPosts,
      };
    case PC.FETCH_ALL_POSTS_FAIL:
      return { loading: false, error: action.payload };
    case PC.RESET_POSTS:
      return state;
    case PC.CREATE_POST:
      return { ...state, posts: [...state.posts, action.payload] };

标签： javascriptreactjsredux

解决方案

看起来您存储的 redux 状态不正确。尝试在您使用扩展运算符的位置编辑您的逻辑。应该是

return {
        loading: false,
        posts: action.payload.posts,
        total: action.payload.totalPosts,
      }

这样你实际上是在更新你的状态，而不是让你的所有状态都只是一个大的帖子数组。我可以看到你想要做什么，但这只有在你做你的返回对象时才是真正需要的

return { ...state, posts: action.payload.data }

并且需要在帖子旁边维护其他状态变量。

一个可以帮助您在未来更好地调试它的工具是 redux chrome 开发工具。https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

推荐阅读