Estoy creando una calculadora con React y tengo problemas para actualizar mi estado con datos obtenidos. El resultado se obtiene correctamente, pero la aplicación falla porque no espera la operación de obtención asíncrona. ¿Podría alguien ayudarme a combinar la operación asíncrona con useReducer?

Mis acciones:

 export const ACTIONS = { ADD_DIGIT: "add-digit", CHOOSE_OPERATION: "choose-operation", CLEAR: "clear", DELETE_DIGIT: "delete-digit", EVALUATE: "evaluate", };

Mi reductor:

 const reducer = (state, { type, payload }) => { switch (type) { ... some other actions ... case ACTIONS.CHOOSE_OPERATION: if (state.currentOperand == null && state.previousOperand == null) { return state; } if (state.currentOperand == null) { return { ...state, operation: payload.operation, }; } if (state.previousOperand == null) { return { ...state, operation: payload.operation, previousOperand: state.currentOperand, currentOperand: null, }; } return { ...state, previousOperand: evaluate(state), operation: payload.operation, currentOperand: null, }; case ACTIONS.EVALUATE: if ( state.operation == null || state.currentOperand == null || state.previousOperand == null ) { return state; } return { ...state, overwrite: true, previousOperand: null, operation: null, currentOperand: evaluate(state), }; } };

Mi función de evaluación:

 const evaluate = ({ currentOperand, previousOperand, operation }) => { const prev = parseFloat(previousOperand); const current = parseFloat(currentOperand); if (isNaN(prev) || isNaN(current)) return ""; const fetchData = async () => { const response = await axios.post("/calculation", { a: prev, b: current, operator: operation, }); return response.data.result; }; let computation = ""; const getResult = async () => { const response = await fetchData(); computation = response; }; return computation.toString(); };