Reactjs Redux reducers—改变深度嵌套的状态

发布于03月12日

我正在努力思考如何改变redux中的深度嵌套状态.对我来说，组合减缩器并改变这些片段的状态的一级属性是有意义的.我不太清楚的是如何更改深度嵌套属性的状态.

{
    cart: {
      items: []
    },
    account: {
      amountLeft: 100,
      discounts: {
        redeemed: [],
        coupons: {
          buyOneGetOne: false
        }
      }
    }  
}

当用户输入代码时，假设他们可以兑换"buyOneGetOne"优惠券，该值应该为真.

case 'EMPTY_CART':
  return Object.assign({}, state, {items: []});

然而，为了改变buyOneGetOne，我似乎首先需要做一个对象.分配优惠券(因为buyOneGetOne已被修改)，然后执行一个对象.分配折扣(因为我修改了优惠券)，然后最终发出动作，这样减速机就可以执行对象.在帐户上分配(因为折扣现在已更改).不过，这似乎非常复杂，而且很容易出错，这让我相信一定有更好的方法.

我做错了吗？似乎减缩器只用于修改状态的根级别属性(如cart和account)，我不应该让减缩器触及帐户内的状态(如折扣减缩器)，因为account已经有了减缩器.但是，当我只想更改状态树下的一个属性时，将从该更改到对象链上的每个对象合并到根的子对象会变得很复杂...

你能/应该在减速机里面装减速机吗，比如在这种情况下有减速机？

function account(state, action) { switch (action.type) { case ADD_DISCOUNT: return { ...state, discounts: discounts(state.discounts, action) }; // etc etc } }

Reactjs Redux reducers—改变深度嵌套的状态

推荐答案

Reactjs相关问答推荐

在react中向数组状态添加值时出错

如何使用皮金贴图在Reactjs中制作 map 上的点之间的线的动画？

FireBase未与Reaction应用程序连接

捕获表单数据时的Reactjs问题

无法使用Reaction日期选取器和Next.js设置初始日期

我如何在不被 destruct 的情况下将导航栏固定在顶部？

React-React中是否完全支持基于类的组件？

Gitlab CI和VITE环境变量出现问题

如何解决使用react-hook-form和yup动态创建的输入不集中的问题

如何在 JS 中绘制具有不同笔画宽度的样条线

在按钮单击中将动态参数传递给 React Query

使用 react pro 侧边栏展开折叠菜单

位于组件material-ui中的TextField中的 map 功能不起作用

为什么 setState 在 React 中不是异步的？

如何在 ChartJS 中操作 Y 轴

DatePicker MUI 如何在日历左侧显示清除文本

vdom 最终更新了 dom(在比较之后)任何 dom 更改实际上应该触发整个树的重绘和回流，那么 vdom 有什么用？

如何从其他组件访问 useQuery refetch 方法？

React如何在用户登录后等待当前用户数据被获取

当页面重新加载react 路由导航到第一页 v6