有人可以向我解释一下来自 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

那是一个redux reducer。请阅读本教程以熟悉它的概念： https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers

Answer 2

Reducer 是由 Redux 推广的，但不是 Redux 固有的概念，因为您可以在不从 Redux 导入任何东西的情况下编写 reducer。减速器是一种特定功能的概念，即：

a function that receives the current state and an action object, decides how to update the state if necessary, and returns the new state: (state, action) => newState. "Reducer" functions get their name because they're similar to the kind of callback function you pass to the Array.reduce() method.

来源：Redux docs

React 现在带有一个 useReducer 钩子 built-in。参见 Hooks API Reference。

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;
};

有人可以向我解释一下来自 ReactJS 的这段代码吗？

Can someone please explain me this code from ReactJS?

reactjs

reduce

shopping-cart