如何听 redux state 反应钩子的变化？

Question

我有多个 forms 和用户现在可以编辑的按钮，如果 redux 的 state 发生变化，我想显示一个按钮保存。

现场演示： state 变化时显示按钮保存

这是我的 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 state 发生变化，则显示保存按钮

    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

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

Answer 1

你可以尝试这样的事情：

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

同时还删除：

useEffect(() => {
    setSaveBtn(true); // show save btn if there is changes in state
}, []);

Answer 2

你可以这样做。 移除效果挂钩，将 setSaveBtn 移至输入 onChange，点击保存后，只需将 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;

Answer 3

你试过这个吗？

const fields = useSelector((state) => state.WHATEVER_REDUCER);

useEffect(() => {
    setSaveBtn(true); // show save btn if there is changes in state
}, [fields]);