Reducer in deeply nested state

Question

I've been trying to come up with a useReducer for a deeply nested state for a while.

const initialState = {
  typeOfMeal: "breakfast",
  protein: "",
  carbs: "",
  fat: "",
  mainPhoto: "",
  platePhoto: "",
  ingredients: [
    {
      ingredientName: "",
      ingredientQuantity: "",
      ingredientUnit: "g",
      ingredientId: 0,
    },
  ],
};

the objects in ingredients are dynamically generated, and that works fine, but I can't update them. This is the case responsible for updating these objects:

case "GET_INGREDIENT_BOX_VALUE":
      return {
        ...state,
        ingredients: [
          ...state.ingredients,
          { ...state.ingredients[action.index], [action.name]: action.value },
        ],
      };

And an example of an object fragment that I want to update:

name="ingredientName"
value={state.ingredients[box.ingredientId].ingredientName}
 onChange={(e) =>
   dispatch({
   type: "GET_INGREDIENT_BOX_VALUE",
   value: e.target.value,
   index: box.ingredientId,
   name: e.target.name,
   })
  }

How to get to such an object? I've been looking for a solution for a while and can't find anything. Thank you for your help :)

Answer 1

Hope this could be helpful.

case "GET_INGREDIENT_BOX_VALUE":
  const { ingredients } = state;
  ingredients[action.index] = {
    ...ingredients[action.index],
    [action.name]: action.value
  };
  return {
    ...state,
    ingredients: [...ingredients],
  };