有人可以从reactjs向我解释一下此代码吗？

Question

谁可以向我解释这个代码吗？我无法像这里发生的事情那样理解。

const cartReducer = (state, action) => {
  if (action.type === "ADD") {
    const updatedTotalAmount =
      state.totalAmount + action.item.price * action.item.amount;

    const existingCartItemIndex = state.items.findIndex(
      (item) => item.id === action.item.id
    );

    const existingCartItem = state.items[existingCartItemIndex];
    let updatedItems;

    if (existingCartItem) {
      const updatedItem = {
        ...existingCartItem,
        amount: existingCartItem.amount + action.item.amount,
      };
      updatedItems = [...state.items];
      updatedItems[existingCartItemIndex] = updatedItem;
    } else {
      updatedItems = state.items.concat(action.item);
    }

    return {
      items: updatedItems,
      totalAmount: updatedTotalAmount,
    };
  }
  return defaultCartState;
};

Answer 1

那是一个还原器。请阅读本教程以熟悉其概念：
https://redux.js.js.js.ss.org/tutorials/fundeactals/第三部分 - 态度 - 降低者

Answer 2

还原器被Redux普及，但不是Redux固有的概念，因为您可以在不从Redux导入的情况下编写还原器。还原器是一种特定函数的概念，即：

接收当前状态和操作对象的函数决定如何在必要时更新状态，并返回新状态：（状态，操作）=＆gt;纽约。 “ reducer”功能获得了他们的名字，因为它们类似于您传递给array.reduce（）方法的回调函数。

来源： redux docs

现在，React与A <代码>用户ducer 挂钩内置。参见钩子API参考。

Answer 3

我已经在您的代码中添加了一些评论，希望这使代码更容易理解。

const cartReducer = (state, action) => {
  // Adding an Item to Cart
  if (action.type === "ADD") {
    // Calculated Cart Total: existing Total + (new Item Price * new item Quantity)
    const updatedTotalAmount = state.totalAmount + action.item.price * action.item.amount;

    /* 
     * Finding Items Index in the Cart Array using the Item ID.
     * Index will be Returned only if Item with same od already exist otherwise -1
     */
    const existingCartItemIndex = state.items.findIndex((item) => item.id === action.item.id);
    /*
     * Getting the CartItem Based on the Index.
     * If the value is -1 i.e., item already doesn't exist, then this code will return undefined
     */
    const existingCartItem = state.items[existingCartItemIndex];

    let updatedItems;
    // existingCartItem will have an Object(which evaluates to true) only if Item already existed in Cart
    if (existingCartItem) {
      // Creating updatedItem by spreading the existingItems data + updating amount/Quantity to: existing Quantity + new Quantity
      const updatedItem = {
        ...existingCartItem,
        amount: existingCartItem.amount + action.item.amount,
      };

      // Making a Copy of Items Array & Replacing Existing Item with new/updated entry
      updatedItems = [...state.items];
      updatedItems[existingCartItemIndex] = updatedItem;
    } else {
      // If the Item doesn't already exist in Cart then we Just add that New Item to the Cart
      updatedItems = state.items.concat(action.item);
    }

    // Return the State with Updated Items List & total Amount
    return {
      items: updatedItems,
      totalAmount: updatedTotalAmount,
    };
  }

  // Default State Return
  return defaultCartState;
};