React Redux认证模块中register内部dispatch未执行问题

核心问题 #

你直接调用了导入的原始register action creator，而非connect注入到组件props中的包装版本。connect会自动将action creator与Redux的dispatch绑定，直接调用原始函数时，内部的dispatch无法关联到Redux store，自然无法触发状态更新。

修复步骤 #

1. 修正组件内的调用方式 #

在onSubmit方法中，将直接调用的register替换为this.props.register：

onSubmit(e) {
  e.preventDefault();

  let { username, password, re_password } = this.state
  if (password === re_password) {
    // 改为调用props中被connect包装后的register
    this.props.register(username, password, re_password); 

    this.setState({ accountCreated: true });
  }
}

2. 优化axios请求的错误处理（推荐） #

当前代码中axios.post().catch()会吞掉请求错误，导致try块无法捕获异常，可能出现res为undefined的情况，进而访问res.data.error时抛出错误。建议移除.catch()，统一用try/catch处理：

try { 
  const res = await axios.post(URL + '/accounts/register', body, config);
    
  if (res.data.error) {
    dispatch({
      type : REGISTER_FAIL
    });
  } else {
    dispatch({
      type : REGISTER_SUCCESS
    });
  }
} catch (err) {
  console.log(err);
  dispatch({
    type : REGISTER_FAIL
  });
}

3. 调整跳转逻辑（可选） #

当前不管注册成功与否都会立即跳转，建议依赖Redux状态控制跳转时机，避免注册失败也跳转的问题：

// 添加mapStateToProps，获取Redux中的认证状态
const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated
});

// 修改connect的参数
export default connect(mapStateToProps, { register })(Register);

之后在render中根据this.props.isAuthenticated或注册结果判断是否跳转。

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