问题:React-redux 没有出现结果

我正在使用 React redux 构建一个您可以提高或减去的数字的 div。在此处输入图像描述

问题是一切看起来都不错,但浏览器上没有结果

reducer-> index.js:

    import { combineReducers } from 'redux'
    
    const sumReducer = (sum = 0, action) => {
        if (action.type === 'ADD' || action.type === 'SUB') {
            let x = action.payload;
            return x;
        }
    
        return sum;
    }
    
    export default combineReducers({
        sum: sumReducer
    });

**action-> index.js**

export const add = (sum) => {
    return {
        type: 'ADD',
        payload: sum + 1
    }
}

export const sub = (sum) => {
    return {
        type: 'SUB',
        payload: sum  - 1
    }
}

我的组件是:upDownSum.js

    import React from 'react'
    import { connect } from 'react-redux'
    import { add, sub } from '../action'
    
    class UpDownSum extends React.Component {
        render() {
            console.log(this.props);
            console.log("ghj");
            return (
                <div key="1">
                    <button onClick={() => sub(this.props.sum)}>-</button>
                    <div>{this.props.sum}</div>
                    <button onClick={() => add(this.props.sum)}>+</button>
                </div>
    
            )
        }
    }
    const MapStateToProps = (state) => {
        return {
            sum: state.sum
        }
    }
    
    export default connect(MapStateToProps, {add: add ,sub: sub})(UpDownSum);

app.js 导入'./App.css';从 './upDownSum' 导入 UpDownSum

function App() {
  return (
    <UpDownSum/>
  );
}

export default App;

谢谢!

解答

您正在将调度映射到 props,这意味着调度动作需要确保使用props而不仅仅是导入的动作:

return (
  <div>
    <button onClick={() => this.props.sub(this.props.sum)}>-</button>
    <div>{this.props.sum}</div>
    <button onClick={() => this.props.add(this.props.sum)}>+</button>
  </div>
)