React-Redux简易计算器状态未更新问题求助

Hey there! Let's get to the bottom of why your Redux state isn't updating when you click the calculator buttons. I've gone through your code and found a few key issues that are causing this problem—let's fix them one by one:

1. Reducer Action Parameter Mismatch #

This is the main culprit! In your reducer, you're destructuring {action,payload} from the action object, but Redux actions use the type field (not action) to identify the action type. Because of this, your switch statement never matches the 'ADD' case, and the default case resets the state to defaultState every time.

Fixed Reducer Code #

const defaultState = {
  expression: ''
};

var rootReducer = (state = defaultState, { type, payload }) => { // Changed "action" to "type"
  switch (type) {
    case 'ADD':
      // Handle clear and backspace actions here too
      if (payload === 'clear') {
        return { expression: '' };
      } else if (payload === 'bs') {
        return { expression: state.expression.slice(0, -1) };
      }
      return { expression: state.expression + payload };
    case 'EVAL':
      try {
        // Evaluate the expression safely (note: eval can be risky, use with caution)
        const result = eval(state.expression);
        return { expression: String(result) };
      } catch (err) {
        return { expression: 'Error' };
      }
    default:
      return state; // Return current state instead of defaultState
  }
};

export default rootReducer;

2. Component Missing Expression Display #

You're connecting the expression state to your component, but you aren't rendering it anywhere. Users won't see what they're typing! Let's add a display area at the top of your calculator.

Fixed Component Code #

import React from 'react';
import { connect } from 'react-redux';

class Calculator extends React.Component {
  render() {
    return (
      <div className="text-center">
        {/* Add this display area to show the current expression */}
        <div className="calculator-display mb-3 p-3 border">
          {this.props.expression || '0'}
        </div>
        <div>
          <div>
            <button name='1' value='1' onClick={() => this.props.addition('1')}>1</button>
            <button name='2' value='2' onClick={() => this.props.addition('2')}>2</button>
            <button name='3' value='3' onClick={() => this.props.addition('3')}>3</button>
          </div>
          <div>
            <button name='4' value='4' onClick={() => this.props.addition('4')}>4</button>
            <button name='5' value='5' onClick={() => this.props.addition('5')}>5</button>
            <button name='6' value='6' onClick={() => this.props.addition('6')}>6</button>
          </div>
          <div>
            <button name='7' value='7' onClick={() => this.props.addition('7')}>7</button>
            <button name='8' value='8' onClick={() => this.props.addition('8')}>8</button>
            <button name='9' value='9' onClick={() => this.props.addition('9')}>9</button>
          </div>
          <div>
            <button name='+' value='+' onClick={() => this.props.addition('+')}>+</button>
            <button name='0' value='0' onClick={() => this.props.addition('0')}>0</button>
            <button name='-' value='-' onClick={() => this.props.addition('-')}>-</button>
          </div>
          <div>
            <button name='/' value='/' onClick={() => this.props.addition('/')}>/</button>
            <button name='evalu' value='evalu' onClick={() => this.props.evaluation()}>=</button> {/* Removed unused '=' payload */}
            <button name='*' value='*' onClick={() => this.props.addition('*')}>*</button>
          </div>
          <div>
            <button name='cler' value='cler' onClick={() => this.props.addition('clear')}>clear</button>
            <button name='bs' value='bs' onClick={() => this.props.addition('bs')}>del</button>
          </div>
        </div>
      </div>
    )
  }
}

const matchStatestoProps = state => {
  return { expression: state.expression }
}

const matchDispatchtoProps = dispatch => {
  return {
    addition: (data) => dispatch({ type: 'ADD', payload: data }),
    evaluation: () => dispatch({ type: 'EVAL' })
  }
}

export default connect(matchStatestoProps, matchDispatchtoProps)(Calculator);

Key Changes Explained #

• Reducer Fixes:
  • Renamed action to type in the action object destructuring so the switch statement works correctly.
  • Updated the default case to return the current state instead of resetting to defaultState.
  • Added handling for 'clear', 'bs' (backspace), and 'EVAL' actions to make the calculator functional.
• Component Fixes:
  • Added a display area to show the current expression from the Redux state.
  • Removed the unused '=' payload from the evaluation button since we don't need it in the reducer.

Now when you click the buttons, your Redux state should update properly, and you'll see the expression displayed on the calculator!

内容的提问来源于stack exchange，提问作者MAYANK KUMAR