Redux

Question

在我的电子商务网站中，我使用 react with redux 和 firebase 来存储数据和身份验证，用户可以将商品添加到购物车，然后访问购物车组件，但是在他注销购物车还是一样，所以我必须从 authReducer

访问 cardReducer 的状态

授权操作：

export const signOut = () => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    const card = getState().card
    firebase.auth().signOut().then(() => {
      dispatch({ type: 'SIGNOUT_SUCCESS', card })
    });
  }
}

卡片减速器：

const initState= []

const cardReducer = (state = initState, action) => {
  switch (action.type) {
    case 'ADD_POST':
      if (!state.includes(action.post)) {
        return [...state, action.post]; 
      }
      return state;
    case 'REMOVE_POST':
      return state.filter(post => post === action.post);
    default: return state;
  }
}

Answer 1

您应该可以通过为 LOGOUT 操作向您的 cardReducer 添加案例来做到这一点。登出时会触发，可以重置为[]。例如

case 'LOGOUT':
      return initState;

Answer 2

您必须添加另一个案例以在 cardReducer 中清空购物车。

case 'CLEAR_CART':
      return initState;

我假设，您也有一个购物车操作文件，其中定义了一个清除购物车的操作

export const clearCart = () => {
  return (dispatch) => {
     dispatch({ type: 'CLEAR_CART' })
  }
}

然后将该操作导入您的 auth Actions 文件，并调用该操作。

import { clearCart } from '..Cart Actions Path';

export const signOut = () => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    const card = getState().card
    firebase.auth().signOut().then(() => {
      dispatch({ type: 'SIGNOUT_SUCCESS', card })
      clearCart();
    });
  }
}

Redux - 从 action 访问其他 reducer 的数据

Redux - Access other reducer's data from the action

reactjs

redux-thunk