如何在注销时删除购物车项目

Question

我正在从localStorage中删除cartItems，但cart仍然显示所选项目。

注销的Redux操作。

export const signout = () => (dispatch) => {
localStorage.removeItem('userInfo'); 
localStorage.removeItem('cartItems');
localStorage.removeItem('shippingAddress');  
dispatch({type: USER_SIGNOUT})
}

在购物车屏幕上获取购物车项目。

const cart = useSelector(state=> state.cart);
const {cartItems} = cart;

登录缩减

export const userSigninReducer = (state={},action) => {
switch(action.type){
case USER_SIGNIN_REQUEST:
return {loading:true};
case USER_SIGNIN_SUCCESS:
return {loading: false,userInfo: action.payload};
case USER_SIGNIN_FAIL:
return {loading: false,error: action.payload};
case USER_SIGNOUT:
return {};
default:
return state;
}
}

Answer 1

查看这条线

const cart = useSelector(state=> state.cart);

我怀疑您有一个cart reducer，您正在从该reducer获取数据并将其显示在UI中。

注销时，您要确保本地存储已清除，userDetails已刷新。

dispatch({type: USER_SIGNOUT})

解决方案：这样，您还需要dispatch对推车减速器再执行一次操作，以便再次重置推车详细信息。

添加更多动作dispatch({type: "CART_RESET"});，以便您可以重置推车减速器、

export const signout = () => (dispatch) => {
localStorage.removeItem('userInfo'); 
localStorage.removeItem('cartItems');
localStorage.removeItem('shippingAddress');  
dispatch({type: USER_SIGNOUT});
// as you are removing stuffs from localStorage
// you also need to reset the data from reducer
dispatch({type: "CART_RESET"});
}

所以你的推车减速器处理程序应该看起来像这个

case "CART_RESET": return { ...state, cartItems: [] }

这将确保您在发出信号时重置CART，如果需要，也可以按照相同的做法在重置或umounting时重置其他reducer数据。