redux与react18setState触发render问题

最近在做一个需求，需要用im做那个协同。
刚好遇到一个比较有意思的问题。
具体问题就不赘述了。
根本原因就是在修改state的时候，触发了两次重渲染。

后面也是做了一些验证
demo

function App() {
  const [state, setState] = useState("");
  const dispatch = useDispatch();

  const visible = useTypeSelector((state) => state.test.visible);

  console.log("render", {
    state,
    visible,
  });

  const change = () => {
    setState("abc");
    dispatch(
      changeState({
        visible: !visible,
      })
    );
  };

  return <div onClick={change}>app {visible ? "visible" : ""}</div>;
}

这是一个很纯粹的demo。
点击之后会渲染多少次呢？
是一次。
好像没问题。
但是在实际遇到的问题是渲染两次，于是为了复刻当时的场景，我把函数放到window，然后直接调用。

function App() {
  const [state, setState] = useState("");
  const dispatch = useDispatch();

  const visible = useTypeSelector((state) => state.test.visible);

  console.log("render", {
    state,
    visible,
  });

  // @ts-ignore
  window.change = () => {
    setState("abc");
    dispatch(
      changeState({
        visible: !visible,
      })
    );
  };

  return <div>app {visible ? "visible" : ""}</div>;
}

执行一次函数会触发两次渲染。
这么奇怪，当然后面我也以为是状态多少的问题。
组件内定义多几个state也一样的。
那是什么问题呢。
对react比较了解同学应该都知道，state的更改有异步和同步两种。
但是也不合理对吧，如果是同步的，那不应该修改几个state就渲染几次吗？
这就要去看看文档了

这就能解释了。
后面也是用定时器执行了函数，确实也是渲染两次。

后面猜测应该是redux没有做类似自动批处理，所以在一些情况下还是同步更改state，而react18已经做了一些功能调整现在都是异步了，也做了自动批处理，所以就会有类似的问题，当然只是猜测。
redux尝试升级到新版本也存在问题，但是结合场景还是有一些解决办法，这里也就不说了，大家少踩坑，但是踩坑也会提升实力，印象也会更深刻。