我有一个部分,用户可以在其中使用更改时的输入来更改数据,现在我希望能够从 redux 状态中删除项目。
这是代码沙盒链接:live demo
减速器
const initialState = {
firstName: "Kunta ",
lastName: "Kinte",
age: 35,
country: "Ghana",
IQ: 200
};
const DetailsReducer = (state = initialState, action) => {
const { name, value } = action;
return { ...state, [name]: value };
};
export default DetailsReducer;
这是我如何显示数据并尝试删除名字但没有任何反应
import { useSelector } from "react-redux";
const Details = () => {
const details = useSelector((state) => state);
const handleDelete = () => {
details.firstName = "";
};
return (
<div>
<h1> Details </h1>
<span> Firstname : {details.firstName}</span>
<button onClick={handleDelete}>Delete</button>
<br />
<span> LastName : {details.lastName}</span>
<button>Delete</button>
<br />
<span> age : {details.age}</span>
<button>Delete</button>
<br />
<span> country : {details.country}</span>
<button>Delete</button> <br />
</div>
);
};
export default Details;
从这样的 redux 状态中删除项目的正确方法是什么?
答案 0 :(得分:1)
要更改 redux 状态,我们需要使用 useDispatch 钩子。
就你而言:
import { useSelector, useDispatch } from "react-redux";
const Details = () => {
const details = useSelector((state) => state);
const dispatch = useDispatch();
const handleDelete = () => {
dispatch({
type: "change",
name: "firstName",
value: "",
});
}
...
您可以在 reducer 中使用 type 属性将各种行为添加到 redux 状态管理中。