Question

在我的状态中，我有一组对象，它们具有一些描述性属性，数量和唯一ID。此对象中的数据从API响应返回，在我的操作创建者中，我检查状态以查看它是否已存在，如果是，则为我的reducer发送增量操作。这就是我的动作创建者的样子：

export const getProductDetails = upc => (dispatch, getState) => {
const state = getState();
const products = state.table.products;
if (_find(products, upc) !== undefined) {
  dispatch({ type: INCREMENT_QUANTITY, payload: upc });
} else {
axios
  .post(<--POST TO ENDPOINT-->) }
  })
  .then(res => {
    dispatch({ type: POST_UPC, payload: res.data });
  })
  .catch(err => {
    errorHandler(dispatch, err.response, AUTH_ERROR);
  });
 }
};

我对此案例的缩减器的结构如下：

case INCREMENT_QUANTITY:
  return {
    ...state,
    products: state.products.map(product => {
      action.payload === product.upc
        ? { ...product, quantity: product.quantity + 1 }
        : product;
    })
  };

我基于此减速器逻辑 this excellent response，但出于某种原因，在调度操作时，重复的产品会被覆盖为null，而不是按预期增加数量。我现在还在努力学习redux，所以请原谅我的无知。理想情况下，我希望避免引入库或包只是为了增加值。我在减速机中到底错过了什么？

Answer 1

您在map回调中没有返回任何内容，而是创建了一个块，因此您无法获得预期的结果。相反，省略括号{ … }：

products: state.products.map(product => 
  action.payload === product.upc
    ? { ...product, quantity: product.quantity + 1 }
    : product;
);

这将使用箭头函数语法隐式返回三元运算符的结果。

使用redux基于当前值更新对象数组中的单个对象属性

1 个答案: