React-redux 没有结果出现

编程问答 2022-05-28

问题描述

我正在使用 React redux 构建一个数字的 div，您可以对它进行加减运算。 enter image description here

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

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;

谢谢！

解决方法

您正在将 dispatch 映射到 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>
)
actionactionconnectconnectreactjsreactjsreactjsreactjsreduxreduxreduxredux