Añadiendo valores estatales de Redux

Question

Estoy tratando de combinar dos precios separados en un precio total. Tengo los dos estados de precios individuales almacenados y actualizados correctamente usando reductores independientes, pero necesito una manera de combinar estos dos valores dinámicos en un tercer estado de precio total. import React, {useState} from  react ; import { useSelector, useDispatch } from  react- redux ; const planPrice = useSelector(state => state.planPrice); const repairPrice = useSelector(state => state.repairPrice); //Use the state hook to store the Total Price const [totalPrice, setTotalPrice] = useState(0); const [items, setItems] = useState([]); function addItem (newItem) { setItems((prevItems) => { return [...prevItems, newItem]; }); //Update the Plan Price if ({plan}.plan ===  Premium ) { dispatch(addItemPremium()); } else if ({plan}.plan ===  Basic ) { dispatch(addItemBasic()); } //Update the Repair Price if (newItem ===  Small Chip ) { dispatch(addSmallChip()); } else if (newItem ===  Big Chip ) { dispatch(addBigChip()); } // //Update the Total Price setTotalPrice({planPrice} + {repairPrice}); } ¿Esto es posible usando Redux, o voy a hacer esto de la manera equivocada?

techtactician · Accepted Answer

Si usted tiene estado derivado, debe considerar el uso selectores. Estas son funciones que toman el estado como argumento y devuelven un valor estatal derivado.

Por ejemplo:

function totalPrice(state) {
  return state.price1 + state.price2;
}

Si necesitas usar esto mapStateToProps, usted puede hacer lo siguiente:

const mapStateToProps = state => ({
  price: totalPrice(state)
})

Si usas hooks, puedes usar el useSelector Gancho:

const price = useSelector(totalPrice);

Hay bibliotecas (por ejemplo, Resel) que le ayudará a crear selectores composables con caché para la eficiencia.

Tenga en cuenta que la razón por la que debe utilizar selectores versus almacenar el estado redundante, como puede haber intuido, es que el estado redundante puede salir de la sincronización y luego está atascado. Pero si usted tiene una función que calcula el precio total, siempre estará en sincronía con las partes individuales del estado.

Respondida el Dec 17, 2020 a las 00:15 - por techtactician

Gpt · Answer

Para combinar dos valores de precios individuales en un tercer estado de precio total utilizando Redux, puedes crear un nuevo reductor que se encargue de calcular el precio total en función de los precios individuales.

Aquí te dejo un ejemplo de cómo podrías hacerlo:

Define un nuevo reductor que maneje el cálculo del precio total. Por ejemplo, podrías tener un reductor llamado totalPriceReducer.js:

javascript
const initialState = 0;

const totalPriceReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATETOTALPRICE':
      return action.planPrice + action.repairPrice;
    default:
      return state;
  }
}

export default totalPriceReducer;

En tu archivo principal donde combines los reductores, importa el nuevo reductor totalPriceReducer y agrégalo al combineReducers:

javascript
import { combineReducers } from 'redux';
import planPriceReducer from './planPriceReducer';
import repairPriceReducer from './repairPriceReducer';
import totalPriceReducer from './totalPriceReducer';

const rootReducer = combineReducers({
  planPrice: planPriceReducer,
  repairPrice: repairPriceReducer,
  totalPrice: totalPriceReducer
});

export default rootReducer;

Modifica tu componente para que actualice el precio total en lugar de manejarlo localmente con useState. En lugar de usar useState para totalPrice, puedes consultar el precio total desde el estado de Redux:

javascript
import React from "react";
import { useSelector, useDispatch } from "react-redux";

const YourComponent = () => {
  const planPrice = useSelector(state => state.planPrice);
  const repairPrice = useSelector(state => state.repairPrice);
  const totalPrice = useSelector(state => state.totalPrice);
  const dispatch = useDispatch();

const addItem = (newItem) => {
    // Tu lógica para agregar elementos

// Actualizar el estado del precio total
dispatch({
  type: 'UPDATE_TOTAL_PRICE',
  planPrice: planPrice,
  repairPrice: repairPrice
});


}

return (
    

      Plan Price: {planPrice}
      Repair Price: {repairPrice}
      Total Price: {totalPrice}
    
  );
}

export default YourComponent;

Con estos cambios, ahora el precio total se calculará correctamente en base a los precios individuales almacenados en el estado de Redux. Asegúrate de ajustar esta implementación según tu estructura de carpetas y necesidades específicas.

Respondida el Dec 18, 2020 a las 00:11 - por Gpt

Gemini · Answer

Sí, es posible combinar dos estados de precio separados en un precio total utilizando Redux. Aquí tienes cómo puedes hacerlo:

Paso 1: Crea un reducer para el estado de precio total

javascript
const totalPriceReducer = (state = 0, action) => {
  switch (action.type) {
    case 'UPDATE_TOTAL_PRICE':
      return action.payload;
    default:
      return state;
  }
};

Paso 2: Crea una acción para actualizar el precio total

javascript
const updateTotalPrice = (newTotalPrice) => ({
  type: 'UPDATE_TOTAL_PRICE',
  payload: newTotalPrice,
});

Paso 3: Utiliza el selector useSelector para acceder al precio total

javascript
const totalPrice = useSelector(state => state.totalPrice);

Paso 4: Actualiza el precio total en el componente

javascript
const addItem = (newItem) => {
  // Actualiza los precios de los planes y reparaciones
  if ({plan}.plan === "Premium") {
    dispatch(addItemPremium());
  } else if ({plan}.plan === "Basic") {
    dispatch(addItemBasic());
  }

  if (newItem === "Small Chip") {
    dispatch(addSmallChip());
  } else if (newItem === "Big Chip") {
    dispatch(addBigChip());
  }

  // Calcula y despacha el nuevo precio total
  const newTotalPrice = planPrice + repairPrice;
  dispatch(updateTotalPrice(newTotalPrice));
};

Esto mantendrá el precio total actualizado dinámicamente a medida que cambien los precios del plan y la reparación.

Nota: Ten en cuenta que estás utilizando tanto useState como Redux para gestionar el estado en este ejemplo. Es posible que desees considerar utilizar uno u otro de forma coherente para evitar posibles conflictos de estado.

Respondida el Dec 18, 2020 a las 00:18 - por Gemini

Añadiendo valores estatales de Redux

3 Respuestas: