函数组件调用Redux action后如何获取更新后的props？

容器组件代码 #

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Login from './Login';
import { loginAction } from './LoginAction';

const mapStateToProps = (state, ownProps) => {
  console.log('mapStateToProps', state)
  return {
    payload: state.Auth
  };
};

const mapDispatchToProps = dispatch => {
  console.log('mapDispatchToProps')
  return bindActionCreators(
    {
      loginAction
    },
    dispatch
  );
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login);

组件内函数代码 #

const handleSubmit = async (event) => {
  
  const form = event.currentTarget
  if (form.checkValidity() === false) {
    event.preventDefault()
    event.stopPropagation()
    return false
  }
  setValidated(true)

  props.loginAction(username, password).then(() =>{
    console.log('props loginAction', props) // 调用loginAction后props未立即更新
    if (props.payload.error){
      return false
    }
  })

  // navigate('/dashboard')
}

useEffect(()=>{console.log('payload effect', props.payload)},[props.payload])

Reducer代码 #

import * as types from './LoginActionTypes';

var initialState = {
  loading: false,
  result: null,
  error: null,
  message: null,
};

function AuthReducer(state = initialState, action) {
  switch (action.type) {
    case types.ACTION_REQUEST:
      return Object.assign({}, state, {
        loading: true,
        error: null
      });
      break;
    case types.AUTHENTICATED:
      return Object.assign({}, state, {
        loading: false,
        status: true,
        result: action.payload
      });
      break;
    case types.AUTHENTICATION_ERROR:
      return Object.assign({}, state, {
        loading: false,
        status: false,
        error: action.error
      });
      break;
    case types.UNAUTHENTICATED:
      return Object.assign({}, state, initialState);
      break;
    default:
      return state;
  }
}

export default AuthReducer;

问题说明 #

调用loginAction后，在then回调中无法获取更新后的props，但mapStateToProps已输出新状态，useEffect也能监听到props.payload的变化。该功能在类组件中正常，函数组件出现异常。

解决建议 #

核心原因

函数组件的props是当前渲染周期的快照，异步回调（比如then）会捕获这个快照，即使Redux状态更新，回调里的props也不会同步更新——这是闭包的特性。而类组件中this.props是动态指向最新值的，所以不会有这个问题。

方案1：用useEffect处理后续逻辑（推荐）

把登录成功/失败的后续操作（比如跳转、错误提示）放到监听props.payload的useEffect中，这是最符合React函数组件范式的做法：

useEffect(() => {
  // 跳过初始加载状态
  if (props.payload.loading) return;
  
  // 登录成功，跳转至仪表盘
  if (props.payload.status) {
    navigate('/dashboard');
  } 
  // 登录失败，处理错误
  else if (props.payload.error) {
    console.error('登录失败:', props.payload.error);
    // 这里可以加弹窗提示等用户反馈
  }
}, [props.payload, navigate]);

// 修改handleSubmit，只触发action，不再在then里处理逻辑
const handleSubmit = async (event) => {
  const form = event.currentTarget;
  if (form.checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
    return false;
  }
  setValidated(true);

  // 仅触发登录action
  await props.loginAction(username, password);
};

方案2：让Action返回请求结果

如果需要在then回调里直接处理，可以修改loginAction，让它的Promise直接返回请求的结果（比如error或data），这样不用依赖props更新：

// 示例：修改LoginAction中的loginAction
export const loginAction = (username, password) => async (dispatch) => {
  try {
    dispatch({ type: types.ACTION_REQUEST });
    const response = await api.login(username, password);
    dispatch({ type: types.AUTHENTICATED, payload: response.data });
    // 返回成功结果
    return { success: true, data: response.data };
  } catch (error) {
    dispatch({ type: types.AUTHENTICATION_ERROR, error: error.message });
    // 返回错误信息
    return { success: false, error: error.message };
  }
};

// 组件中使用
props.loginAction(username, password).then((result) => {
  if (!result.success) {
    console.error('登录失败:', result.error);
    return false;
  }
  // 登录成功，直接跳转
  navigate('/dashboard');
});

方案3：使用useSelector获取实时状态（注意限制）

可以用useSelector直接获取Redux的最新状态，但不能在异步回调中调用useSelector（违反React Hooks规则），如果一定要用，可以在组件顶层获取状态的引用，或者通过Redux store实例的getState()方法（不推荐直接依赖store实例，会降低组件复用性）。

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