无法在Redux订阅中获取useState的最新值

mf98qq94  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(323)

Redux中的状态更新时,如果与当前页面的useState不同,则页面中的useState也会更新,但更新后红框中的值不会改变,始终默认为true。

import { useEffect, useState } from "react";
    import store from "./redux";
    import { useDispatch } from "react-redux";
    import { setState } from "./redux/modules/menu";

    function App() {
      const dispatch = useDispatch();

      const [baseState, setBaseState] = useState(true);

      useEffect(() => {
        console.log("baseState :>> ", baseState);
      }, [baseState]);

      useEffect(() => {
        const unSubscribe = store.subscribe(() => {
          console.log(store.getState().menu.state, baseState);

          if (store.getState().menu.state !== baseState) {
            setBaseState(store.getState().menu.state);
          }
        });

        return () => unSubscribe();
      }, []);

      const buttonEvent = () => {
        const storeState = store.getState().menu.state;
        dispatch(setState(!storeState));
      };

      return (
        <div className="App">
          <h1>value: {baseState + ""}</h1>
          <button onClick={buttonEvent}>change</button>
        </div>
      );
    }

    export default App;

运行结果:

njthzxwz

njthzxwz1#

所以,如果我得到了你的问题,你所做的是,在一个按钮点击,你正在改变redux状态,并在此基础上,你想改变本地状态。
但在你的useEffect()(第二个);

useEffect(() => {
        const unSubscribe = store.subscribe(() => {
          console.log(store.getState().menu.state, baseState);

          if (store.getState().menu.state !== baseState) {
            setBaseState(store.getState().menu.state);
          }
        });

        return () => unSubscribe();
      }, []);

您给出了一个空数组作为第二个参数,这意味着此useEffect将仅在第一次渲染时触发(类似于类组件中的componentDidMount),因此永远不会知道redux状态是否已更改。
因此,要使它工作,只需删除它们(就像我们在类组件中有componentDidUpdate一样)。

c9qzyr3d

c9qzyr3d2#

我找到了最合适的解决方案,使用Redux useSelector

相关问题