reactjs - Tastarea stării lui useReducer

În prezent lucrez la un calculator în React cu TypeScript, dar am unele probleme să tipizez starea în funcția mea reducer. Momentan doar „any” funcționează. Știu că este un obiect cu stringuri în interior, dar nu știu de ce nu funcționează.

Mulțumesc pentru ajutor.

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;

Răspuns #1

Instrucțiunea ta switch nu este exhaustivă. În cazul implicit nu returnezi nimic.

schimbă funcția reducer astfel:

const reducer = (state: State, { type, payload }: Action) => {

și apoi:

default: 
  return state;

Ar trebui să meargă.

O altă modalitate de a scrie acțiuni fără Enums:

type State = {
  currentOperation?: string
  result?: string
  operator?: string
}
export type Action = 
   | { type: 'ADD_NUMBER', payload: {digit: number} }
   | { type: 'ADD_OPERATOR', payload: string};

const reducer = (state: State, action: Action) => {
  console.log("State", state);
  switch (action.type) {
    case 'ADD_NUMBER':
      return {
        ...state,
        currentOperation: `${state.currentOperation || ""}${action.payload.digit}`
      };
    case 'ADD_OPERATOR':
      return {
        ...state,
        // (payload here is a string)
      }
   
    default:
      return state;
  }
};