[英]redux reset state when changing pages
所以我用 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;
看起來您存儲的 redux 狀態不正確。 嘗試在您使用擴展運算符的地方編輯您的邏輯。 應該是
return {
loading: false,
posts: action.payload.posts,
total: action.payload.totalPosts,
}
這樣你實際上是在更新你的狀態,而不是讓你的所有狀態只是一個大的帖子數組。 我可以看到你想做什么,但只有當你在做你的返回對象時才真正需要這樣做
return { ...state, posts: action.payload.data }
並且需要在帖子旁邊維護其他狀態變量。
redux chrome dev 工具可以幫助您在未來更好地調試它。 https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.