Question

我有一个包含一些列表对象的 reducer。

const list = [
  {
    name: 'A',
    products: { items: [] },
  },
  {
    name: 'B',
    products: { items: [{ qty: 1 }] },
  },
]

我想向产品密钥添加新项目。 减速器

export const addProductToSubscription = (state, { name, products }) => ({
  ...state,
  list: state.list.map((v) =>
    name === v.subscriptionName ? [...v.products, { ...v.products, items: products }] : v
  ),
})

这样发送，

dispatch("A",[{qty:2}])

预期输出

const list = [
  {
    name: 'A',
    products: { items: [{ qty: 2 }] },
  },
  {
    name: 'B',
    products: { items: [{ qty: 1 }] },
  },
]

什么 reducer 不更新状态。

谢谢！！

Answer 1

我重新创建了你的环境，结果就像-

const

const state = {
    list: [
        {
            name: "A",
            products: { items: [] },
        },
        {
            name: "B",
            products: { items: [{ qty: 1 }] },
        },
    ],
};

const updateState = (state, { name, products }) => {
    return {
        ...state,
        list: state.list.map(v => {
          return {
            ...v,
            products: {
              ...v.products,
              items: [
                ...v.products.items,
                ...products
              ]
            }
          }
        }),
    };
};

const res = updateState(state, { name: "A", products: [{ qty: 2 }, {qty: 4}] });

console.log(JSON.stringify(res));

Answer 2

比 false 和扩展运算符 (import darkdetect darkdetect.theme() # Returns 'Dark' darkdetect.isDark() # Returns True darkdetect.isLight() # Returns False) 更高级的解决方案 - immutability-helper

Object.assign

输出：

...

Answer 3

使用扩展运算符获取新副本并更新到状态

export const addProductToSubscription = (state, { name, products }) => ({
  ...state,
  list: state.list.map((v) =>
    v.name === name
      ? {
          ...v,
          products: { items: [...v.products.items, ...products] },
        }
      : v
  ),
});

在 redux 中将对象推入数组？

3 个答案: