Question

我正在使用React钩子useReducer来管理类似购物车的应用程序的状态。我的cartReducer用于处理商品的添加/删除/更改数量：

// utils/reducers.js
export const cartReducer = (state, action) => {
  switch (action.type) {
    case ACTIONS_TYPES.ADD_ITEM: {
      // ...
    }

    case ACTIONS_TYPES.REMOVE_ITEM: {
      // ...

    case ACTIONS_TYPES.EMPTY_CART: {
      // ...
    }

    case ACTIONS_TYPES.CHANGE_ITEM_QTY: {
      // ...
    }

    default: {
      throw new Error('Unrecognized action in cartReducer.');
    }
  }
};

Reducer cartReducer用于我的购物车组件中：

const [cart, dispatch] = useReducer(cartReducer, { items: [] });

现在，我想使用首选库添加通知，但我不知道如何处理。我想我有3种选择：

选项1 ：污染我的reducer调用该库，即在返回新状态之前立即添加showSuccessToast()之类的函数；
选项2 ：创建诸如ACTIONS_TYPES.SHOW_SUCCESS_TOAST之类的新动作，但这需要我更改所有dispatch()调用；
选项3 ：创建一个新的cartNotificationReducer，添加类似showSuccessToast()的功能

我知道某些选项可能是反模式，因此我认为选项3最好。但是useReducer仅接受一个减速器...如何将它们组合在一起？

React useReducer钩子，如何处理多种不相关的动作类型？

0 个答案: