如何使用 react reducer 獲取單個 object？

Question

我發現這個教程https://www.digitalocean.com/community/tutorials/react-crud-context-hooks描述了如何使用反應鈎子和上下文構建 CRUD 應用程序 API。

假設 state 被描述為帶有 object 的數組，並且在 appReducer 中我們有操作：

• 創造
• 編輯
• 如果 id 與 payload.id 匹配，是否有可能還有一個 get 方法返回單個 object？

const initialState = {
  products: [
    {
      id: 1,
      name: "Milk",
      amount: 3,
      company: "XXX"
    }
  ]
};

export default function appReducer(state, action) {
  switch (action.type) {
    case "ADD_PRODUCT":
      return {
        ...state,
        products: [...state.product, action.payload],
      };

    case "EDIT_PRODUCT":
      const updatedProduct = action.payload;

      const updatedProducts = state.products.map((prod) => {
        if (product.id === updatedProduct.id) {
          return updatedProduct;
        }
        return prod;
      });

      return {
        ...state,
        products: updatedProducts,
      };

    case "REMOVE_PRODUCT":
      return {
        ...state,
        products: state.products.filter(
          (prod) => prod.id !== action.payload
        ),
      };

    default:
      return state;
  }
};

我想到的是在 initialState 中添加 selectedProduct 屬性，但是我每次都需要返回產品數組。

我也在考慮添加額外的 reducer，但是這個解決方案存在同步問題，返回的 selectedProduct 已過時。

Answer 1

根據我對這個問題的理解，我相信您正在嘗試從列表中獲取單個產品。 那么你可以在你的減速器中添加一個案例，比如“GET_SINGLE_PRODUCT”。

export default function appReducer(state, action) {
  switch (action.type) {
          
    case "GET_SINGLE_PRODUCT":
      return {
        ...state,
        product: state.products.find(
          (prod) => prod.id === action.payload
        ),
      };

    default:
      return state;
  }
};

State

const initialState = {
  products: [
    {
      id: 1,
      name: "Milk",
      amount: 3,
      company: "XXX"
    }
  ],
product: {}
};