如何使用反应钩子从 redux state 中删除项目

Question

我有一个部分，用户可以使用更改输入来更改数据，现在我希望能够从 redux state 中删除项目。

这里是代码沙盒链接： 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 state 中删除项目的正确方法是什么？

Answer 1

要更改 redux state，我们需要使用 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 state 管理中。