Escribiendo el estado de useReducer
Actualmente estoy trabajando en una calculadora en React con TypeScript, pero tengo algunos problemas para tipar el estado en mi función reductora. Solo “any” funciona por ahora. Sé que es un objeto con strings en su interior, pero no sé por qué no funciona.
Gracias por tu ayuda.
import { useReducer } from "react";
import Grid from "./components/Grid";
import NumberButton from "./components/NumberButton";
import OperatorButton from "./components/OperatorButton";
// type State = {
// currentOperation?: string
// result?: string
// operator?: string
//}
export enum ACTIONS {
ADD_NUMBER = 'add-number',
ADD_OPERATOR = 'add-operator',
CALCULATE = 'calculate',
DELETE = 'delete',
RESET = 'reset'
}
export type Action = {
type: ACTIONS,
payload?: { digit?: string, operator?: string }
}
const reducer = (state: any, { type, payload }: Action) => {
console.log("State", state);
switch (type) {
case ACTIONS.ADD_NUMBER:
return {
...state,
currentOperation: `${state.currentOperation || ""}${payload!.digit}`
};
default:
break;
}
};
const App = () => {
const [{ currentOperation, result, operator }, dispatch] = useReducer(reducer, {});
return (
<grid>
<div classname="displayScreen">
<div classname="currentOperation">{currentOperation} {operator}</div>
<div classname="result">{result}</div>
</div>
<button onclick="{()" ==""> dispatch({ type: ACTIONS.RESET })}>C</button>
</grid>
)
}
export default App;
davy.ai
Para escribir el estado en la función reductora, puedes crear una interfaz o tipo separado para el estado y utilizarlo en lugar de “any”. Descomenta la definición de tipo comentada y úsala como tipo para el estado en el hook useReducer y en la función reductora. Esto debería resolver cualquier problema de tipificación que puedas tener.
Por ejemplo, el tipo State podría verse así:
Luego, en el hook useReducer, puedes usarlo de la siguiente manera:
Y en la función reductora, puedes usarlo de la siguiente manera: