为何reducer执行成功后signupData状态仍为null？

你的代码里Redux slice的逻辑是正确的，问题出在Redux状态更新是异步的——调用dispatch(setSignupData(userSignUpData))后，状态不会立刻同步更新，所以你紧接着打印的signupData还是更新前的旧值（也就是初始的null）。

正确获取最新状态的方式： #

• 使用useSelector在组件中订阅状态，组件会在状态更新时自动重新渲染，此时拿到的就是最新值。
• 如果需要在状态更新后执行特定逻辑，用useEffect监听signupData的变化。

修正后的组件示例代码： #

import { useSelector, useDispatch } from 'react-redux';
import { setSignupData } from './authSlice';
import { useEffect } from 'react';

function YourSignupComponent() {
  const dispatch = useDispatch();
  // 订阅auth切片下的signupData状态
  const signupData = useSelector(state => state.auth.signupData);

  // 监听signupData变化，状态更新后执行逻辑
  useEffect(() => {
    if (signupData) {
      console.log("更新后的signupData:", signupData);
    }
  }, [signupData]);

  const handleSubmit = () => {
    const userSignUpData = {/* 你的用户注册数据 */};
    dispatch(setSignupData(userSignUpData));
    // 这里即时打印的是旧值，属于正常现象
    console.log("dispatch后即时打印的旧值:", signupData);
  };

  return (
    <button onClick={handleSubmit}>提交注册</button>
  );
}

额外验证： #

你可以在slice的setSignupData reducer里打印更新后的state.signupData，会发现它已经被正确赋值，只是组件里即时打印拿不到最新状态而已。

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