Redux Toolkit createSlice生成的action执行后状态未同步更新问题

1. Redux的dispatch（也就是你调用的increment）本身是完全同步的，执行完成后Redux Store的状态就已经完成更新。你两次打印拿到的都是旧值和Redux无关，是React闭包快照的特性导致的：你当前useEffect的依赖是空数组，只会在组件首次渲染时执行一次，这个effect内部捕获的counter是首次渲染时props里的初始值，属于当前作用域的常量，哪怕后续Store更新、组件props变化，这个闭包里的counter值也不会改变。
2. connect高阶组件要向组件传递更新后的props，需要触发组件重新渲染，新的props只会在下一次渲染的作用域里生效，当前执行的effect里永远拿不到更新后的值。

方法1：拆分副作用逻辑，监听counter变化 #

把需要在counter更新后执行的逻辑，放到单独的、依赖counter的useEffect中：

const Counter = ({ counter, increment }) => {
  // 组件初始化时执行+1操作
  useEffect(() => {
    console.log('初始counter值：', counter);
    increment();
  }, []);

  // counter发生变化时执行后续逻辑
  useEffect(() => {
    console.log('更新后的counter值：', counter);
  }, [counter]);

  return <div>Counter: {counter}</div>;
};

方法2：直接通过Store实例获取最新状态 #

如果你需要在dispatch之后立刻拿到最新的状态，可以直接引入你的Store实例，调用getState()获取全量最新状态：

// 引入你创建的store实例，路径根据你的项目结构调整
import { store } from '../store';

useEffect(() => {
  console.log(counter);
  increment();
  // 直接从store拿最新值，不需要等待组件渲染
  console.log(store.getState().counter);
}, []);

方法3：改用函数组件推荐的useSelector+useDispatch写法 #

和connect逻辑一致，只是写法更简洁，依然是通过监听状态变化触发副作用：

import { useSelector, useDispatch } from 'react-redux';
import { increment } from "../slices/counter";

const Counter = () => {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  useEffect(() => {
    console.log('初始值', counter);
    dispatch(increment());
  }, []);

  useEffect(() => {
    console.log('更新后的值', counter);
  }, [counter]);

  return <div>Counter: {counter}</div>;
};

内容的提问来源于stack exchange，提问作者Kostya Tresko