如何解决React-redux 没有结果出现
我正在使用 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>
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。