React-redux 没有出现结果
React-redux no result apears
我正在使用 React redux 构建一个 div 的数字,您可以加或减。
enter image description here
问题是一切看起来都不错
但是在浏览器上没有结果
减速器-> 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>
)
我正在使用 React redux 构建一个 div 的数字,您可以加或减。 enter image description here
问题是一切看起来都不错 但是在浏览器上没有结果
减速器-> 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>
)