我对React和Redux有些陌生,所以我可能会错过一些明显的东西。但我被卡住了,谷歌给我留下的困惑比帮助更多。
我正在做一个简单的应用程序,里面有狗,每只狗都有一个类似“喜欢”或“递增”的按钮,每次点击它都会得到一个+ 1。
好吧,每次我尝试点击它,我得到“这.addLikes不是一个函数”。
组件DogList.js
import React, { Component } from "react";
import { dogs } from "../public/data.js";
import { addLikes } from "./actions/addLikes";
import { connect } from "react-redux";
class DogList extends Component {
handleClick = (dog) => {
console.log("was clicked!");
this.addLikes(dog.id);
};
render() {
console.log(dogs);
return (
<div>
{dogs.map((dog) => (
<div key={dog.id} className="dog-card">
<p> Name: {dog.name}</p>
<p> Breed: {dog.breed}</p>
<p> Known For: {dog.knownFor}</p>
<button onClick={this.handleClick.bind(this, dog.id)}>0</button>
</div>
))}
</div>
);
}
}
export default connect(null, { addLikes })(DogList);
操作addLikes.js
export function addLikes(state) {
return {
type: "LIKED",
payload: state
};
}
Reducer likesReducer.js
export default function likesReducer(state = 0, action) {
switch (action.type) {
case "LIKED":
return { ...(state.likes + 1) };
default:
return state;
}
}
我做错了什么?
1条答案
按热度按时间pes8fvy91#
您需要使用
this.props.addLikes
。但要注意:这是一个令人难以置信的过时的做事方式,如果你只是在学习这个,你应该远离你正在学习的教程!
在2023年,你应该不使用类组件。React生态系统已经转移到带有钩子的函数组件。此外,你不应该使用
connect/mapStateToProps
,因为这些是只需要与类组件兼容的遗留API。展望未来,你应该使用
useSelector/useDispatch
。此外,你在这里的Redux风格非常过时。现代Redux(自2019年以来)不使用switch.. case reducers,ACTON_TYPES或不可变的reducer逻辑。你可以阅读现代Redux here并使用official Redux tutorial