Javascript 如何侦听react钩子中的redux状态更改？

我有多个表单和按钮，用户可以编辑现在我想显示一个按钮保存，如果redux的状态改变

现场演示：

这是我的redux

const initialState = {
  firstName: "Kunta ",
  lastName: "Kinte",
  age: 35,
  country: "Ghana",
  color: "#000"
};

const DetailsReducer = (state = initialState, action) => {
  const { name, value } = action;

  return { ...state, [name]: value };
};

export default DetailsReducer;

下面是我的js代码，如果redux状态发生变化，它将显示save按钮

    import React, { useState, useEffect } from "react";
    import { useSelector, useDispatch } from "react-redux";
    
    const Settings = () => {
      const fields = useSelector((state) => state);
      const dispatch = useDispatch();
      const [saveBtn, setSaveBtn] = useState(false);
    
      useEffect(() => {
        setSaveBtn(true); // show save btn if there is changes in state
      }, []);
    
      console.log(fields.firstName);
    
      return (
        <div>
          <div>
            <h1>Edit </h1>
            First Name:{" "}
            <input
              name="firstname"
              value={fields.firstName}
              onChange={(e) =>
                dispatch({ name: "firstName", value: e.target.value, type: "" })
              }
            />
            {saveBtn === true && <button className="btn-save">save </button>}
          </div>
        </div>
      );
    };
    
    export default Settings;


  [1]: https://codesandbox.io/s/multiple-inputs-kkm6l?file=/src/Components/Settings.js:0-816

import React，{useState，useffect}来自“React”；
从“react-redux”导入{useSelector，useDispatch}；
常量设置=（）=>{
常量字段=使用选择器（（状态）=>状态）；
const dispatch=usedpatch（）；
const[saveBtn，setSaveBtn]=useState（false）；
useffect（（）=>{
setSaveBtn（true）；//如果状态发生更改，则显示save btn
}, []);
console.log（fields.firstName）；
返回(
编辑
名字：{'}
分派（{name:“firstName”，值：e.target.value，类型：”“}）
}
/>
{saveBtn==true&&save}
);
};
导出默认设置；
[1]: https://codesandbox.io/s/multiple-inputs-kkm6l?file=/src/Components/Settings.js:0-816

---

我需要做什么来解决这个问题？

您可以尝试以下方法：

<input
    name="firstname"
    value={fields.firstName}
    onChange={(e) =>
        dispatch({ name: "firstName", value: e.target.value, type: "" }, setSaveBtn(true))
    }
/>

---

你可以这样做。移除效果挂钩，将setSaveBtn移动到input onChange，然后单击save，将setSaveBtn设置为false

    import React, { useState, useEffect } from "react";
    import { useSelector, useDispatch } from "react-redux";
    
    const Settings = () => {
      const fields = useSelector((state) => state);
      const dispatch = useDispatch();
      const [saveBtn, setSaveBtn] = useState(false);
    
      console.log(fields.firstName);
    
      return (
        <div>
          <div>
            <h1>Edit </h1>
            First Name:{" "}
            <input
              name="firstname"
              value={fields.firstName}
              onChange={(e) => {
                dispatch({ name: "firstName", value: e.target.value, type: "" })
                setSaveBtn(true)
              }}
            />
            {saveBtn === true && 
              <button
               onClick={() => setSaveBtn(false)}
              className="btn-save">save </button>}
          </div>
        </div>
      );
    };
    
    export default Settings;

import React，{useState，useffect}来自“React”；
从“react-redux”导入{useSelector，useDispatch}；
常量设置=（）=>{
常量字段=使用选择器（（状态）=>状态）；
const dispatch=usedpatch（）；
const[saveBtn，setSaveBtn]=useState（false）；
console.log（fields.firstName）；
返回(
编辑
名字：{'}
{
分派（{name:“firstName”，值：e.target.value，类型：”“}）
setSaveBtn（真）
}}
/>
{saveBtn===true&&
setSaveBtn（假）}
className=“btn保存”>保存}
);
};
导出默认设置；

所以我需要在ech输入上执行此设置VAEBTN？这是错误的，我只想要一个函数，它可以检测状态是否发生了变化，然后做些什么

    import React, { useState, useEffect } from "react";
    import { useSelector, useDispatch } from "react-redux";
    
    const Settings = () => {
      const fields = useSelector((state) => state);
      const dispatch = useDispatch();
      const [saveBtn, setSaveBtn] = useState(false);
    
      console.log(fields.firstName);
    
      return (
        <div>
          <div>
            <h1>Edit </h1>
            First Name:{" "}
            <input
              name="firstname"
              value={fields.firstName}
              onChange={(e) => {
                dispatch({ name: "firstName", value: e.target.value, type: "" })
                setSaveBtn(true)
              }}
            />
            {saveBtn === true && 
              <button
               onClick={() => setSaveBtn(false)}
              className="btn-save">save </button>}
          </div>
        </div>
      );
    };
    
    export default Settings;