I am making a calculator using the useReducer hook in React. I have made the useReducer hook to carry out all the operations, and the digit /operation buttons, on the calculator keyboard, are replaced by components which call the reducer. I am assuming there is a mistake somewhere in the syntax, as on pressing the buttons, no digits or operation symbols are showing up in the calculator display. The button component is getting rendered.

The reducer Function --->

 import React , {useReducer ,useState}from "react";
import ButtonDigit from "./ButtonDigit";
import ButtonOperation from "./ButtonOperation";
import "./style.css"

export const ACTIONS = {
  ADD_DIGIT : 'add-digit',
  DELETE_DIGIT: 'delete-digit',
  CLEAR: 'clear',
  CHOOSE_OPERATION: 'choose-operation',
  EVALUATION: 'evaluation'
}

function reducer (state, action) { 
   switch(action.type){
    case ACTIONS.ADD_DIGIT: 
      return {...state, currentOperand: `${state.currentOperand || ""}${action.payload}`}  
    case ACTIONS.DELETE_DIGIT:
      return state
    case ACTIONS.CLEAR:
      return {currentOperand: 0}
    case ACTIONS.CHOOSE_OPERATION:
      return state
    case ACTIONS.EVALUATION:
      return state
    default:
      return state
   }
}
export default function App() {
  const [{prevOperand=null, currentOperand =0, operation=null}, dispatch] = useReducer(reducer,{})
  // console.log("Rendered!")
  // dispatch({payload:})
  return (
    <div className="calculator-grid">
      <div className="output">
        <div className="prev-operand">{prevOperand} {operation}</div>
        <div className="current-operand">{currentOperand}</div>
      </div>
        <button className="span-two">AC</button>
        <button>DEL</button>
        <ButtonOperation operation={'/'} dispatch={dispatch}/>
        <ButtonDigit number="1" dispatch={dispatch}/>
        <ButtonDigit number="2" dispatch={dispatch}/>
        <ButtonDigit number="3" dispatch={dispatch}/>
        <ButtonOperation operation={'*'} dispatch={dispatch}/>
        <ButtonDigit number="4" dispatch={dispatch}/>
        <ButtonDigit number="5" dispatch={dispatch}/>
        <ButtonDigit number="6" dispatch={dispatch}/>
        <ButtonOperation operation={' '} dispatch={dispatch}/>
        <ButtonDigit number="7" dispatch={dispatch}/>
        <ButtonDigit number="8" dispatch={dispatch}/>
        <ButtonDigit number="9" dispatch={dispatch}/>
        <ButtonOperation operation={'-'} dispatch={dispatch}/>
        <ButtonOperation operation={'.'} dispatch={dispatch}/>
        <ButtonDigit number="0" dispatch={dispatch}/>
        <button className="span-two">=</button>
        {/* <ButtonOperation className="span-two" operation={'='} dispatch={dispatch}/>      */}
    </div>
  );
}


The <ButtonDigit/> Component ----->

import React from 'react'
import ACTIONS from './App'

export default function ButtonDigit({number,dispatch}) {

  // console.log(number)
  return (
    <>
      <button onClick={() => dispatch({type:ACTIONS.ADD_DIGIT , payload:number})}
       >{number}</button>
    </>
  
  )
}
</code>```

[GitHub Link](https://github.com/KS-E/Calculator_useReducer)

The reducer function: 

(https://i.stack.imgur.com/vdetz.jpg)

The buttons and the props being passed :

(https://i.stack.imgur.com/Tb5oZ.jpg)

The button component:

(https://i.stack.imgur.com/hx54t.jpg)



I seemingly have a good understanding of how the useReducer hook works, however, I am unable to see where the mistake is, in the basic commands that I have used. Can someone please check? I am assuming I have made a mistake in the syntax of the props while passing them (or) while calling the reducer function via dispatch.

IMPORTANT NOTE: The code above is incomplete since I am stuck in the very first step itself (display of the digits on the display panel). Please check the ACTIONS.ADD_DIGIT and the corresponding commands. 

CodePudding user response：

ACTIONS.CHOOSE_OPERATION is doing nothing now. So when you press an operation, nothing happened. So I think you should update this case

CodePudding user response：

After checking, I found that the issue is with the import ACTIONS from './App' statement. It is likely a problem with a circular import, which is causing the value ACTIONS.ADD_DIGIT to be undefined when it is used in the button component. The solution is to move the ACTIONS enum to a different file.