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

编程问答 2022-08-13

问题描述

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjsreactjsreduxreduxreduxuse-reducer