Cómo diseñar un estado basado en useReducer El useReducer es un gancho (hook) en React que se utiliza para manejar el estado en componentes funcionales de manera más escalable y predecible. Con el useReducer, se puede diseñar un estado que sea basado en un enfoque de estado global y centralizado. Aquí hay algunos pasos para diseñar un estado basado en useReducer: 1. Importar el hook useReducer de React: “` import { useReducer } from ‘react’; “` 2. Definir el estado inicial y las acciones: El estado inicial representa la forma inicial del estado y las acciones son eventos que pueden modificar el estado. Puedes definirlos como objetos o simplemente como constantes. “` const initialState = { … }; const ACTION_TYPE = { … }; “` 3. Crear un reductor (reducer) personalizado: El reductor es una función que toma el estado actual y una acción como argumentos, y devuelve el nuevo estado actualizado. Puedes definirlo como una función separada o directamente en el componente. “` const reducer = (state, action) => { switch (action.type) { case ACTION_TYPE.ACTION_NAME: return { …state, …newState }; // Agrega más casos según sea necesario default: return state; } }; “` 4. Utilizar el useReducer en el componente: El useReducer recibe como argumento el reductor y el estado inicial, y devuelve un array con el estado actual y una función dispatch, que se utiliza para enviar acciones al reductor. “` const [state, dispatch] = useReducer(reducer, initialState); “` 5. Utilizar el estado y el dispatch en el componente: Puedes acceder al estado y utilizarlo en el componente según sea necesario. Para enviar acciones al reductor, utiliza la función dispatch y pasa un objeto con la propiedad “type” que coincida con los casos definidos en el reductor. “` dispatch({ type: ACTION_TYPE.ACTION_NAME, payload: { … } }); “` Con estos pasos, puedes diseñar y manejar eficientemente un estado basado en useReducer en tus componentes funcionales en React.

Answer

1. 

   davy.ai

   July 22, 2023 at 11:42 am

   Según los requisitos, parece más apropiado mantener la parte de Medicación separada del estado del Camión, ya que un solo Camión puede transportar varias Medicaciones. Por lo tanto, cada Medicación debería tener una referencia al Camión al que pertenece.

   Por lo tanto, el estado del Camión se puede construir utilizando el siguiente código:

   const [trucks, setTrucks] = useState([
     {
       sn: "001001",
       model: "LightWeight",
       weightLimit: "50",
       batteryCapacity: 80,
       state: "IDLE",
       medications: [] // un array vacío para almacenar las medicaciones de este camión
     },
     {
       sn: "001002",
       model: "Middleweight",
       weightLimit: "150",
       batteryCapacity: 30,
       state: "IDLE",
       medications: [] // un array vacío para almacenar las medicaciones de este camión
     },
     //resto de los datos aquí
   ]);
   

   Para añadir una nueva Medicación a un Camión, la Medicación se puede agregar al array medications del Camión. Esto se puede lograr utilizando el hook useReducer con la siguiente función reductora:

   export const truckReducer = (state, action) => {
     switch (action.type) {
       case "ADD_MEDICATION":
         return state.map(truck => {
           if (truck.sn === action.truckSn) {
             return {
               ...truck,
               medications: [...truck.medications, action.medication]
             };
           }
           return truck;
         });
       // otros casos para otras acciones
       default:
         return state;
     }
   };
   

   Aquí, cuando se despacha la acción ADD_MEDICATION, el reductor iterará sobre todos los camiones en el array de estado y devolverá un nuevo array con el objeto de Camión actualizado que coincida con truckSn pasado en la acción. El objeto de Medicación action.medication se agrega al array medications del Camión que coincide. Si truckSn no coincide, el reductor simplemente devuelve el objeto de Camión original.

Comments are closed.