如何使用 react reducer 获取单个 object？

Question

I found this tutorial https://www.digitalocean.com/community/tutorials/react-crud-context-hooks that describes how to build CRUD app with react hooks and context API.

Provided that state is described as array with object and in appReducer we have operations:

• create
• edit
• remove is it possible to have also a get method that would return a single object if id is matched with payload.id?

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

What came to my mind is adding selectedProduct property in initialState however I everytime it was required to return products array as well.

Also I was thinking about adding additional reducer however, I have a synchronization problem with this solution and selectedProduct is returned is out of date.

Answer 1

Based on my understanding of the question I believe you are trying to fetch a single product from the list. Well you can add a case for that in your reducer like '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;
  }
};

In State

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