如何在SignIn表单组件中处理Redux Dispatch成功后的页面跳转？

核心思路 #

由于你的dispatch调用会返回一个Promise，直接通过异步语法（async/await 或 .then()）处理这个Promise的结果，判断登录动作是否成功，再执行跳转逻辑即可。

方案1：使用async/await（推荐，代码更简洁） #

在表单提交的处理函数中，用await等待dispatch的Promise完成，然后判断返回的action是否为成功类型：

import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

const SignInForm = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 等待dispatch完成，获取返回的action对象
      const actionResult = await dispatch(signIn(email, password));
      
      // 检查是否是登录成功的action
      if (actionResult.type === 'signInSuccess') {
        // 跳转到Dashboard页面
        navigate('/dashboard');
      }
    } catch (error) {
      // 处理登录失败逻辑，比如提示用户错误信息
      console.error('登录失败:', error.message);
    }
  };

  // 表单JSX部分...
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">登录</button>
    </form>
  );
};

方案2：使用.then()链式调用 #

如果习惯链式语法，也可以用Promise的.then()和.catch()处理：

const handleSubmit = (e) => {
  e.preventDefault();
  dispatch(signIn(email, password))
    .then(actionResult => {
      if (actionResult.type === 'signInSuccess') {
        navigate('/dashboard');
      }
    })
    .catch(error => {
      console.error('登录失败:', error.message);
    });
};

针对Redux Toolkit的特殊处理 #

如果你的signIn是用Redux Toolkit的createAsyncThunk创建的异步action，成功的action类型会是[sliceName]/signIn/fulfilled，可以直接通过signIn.fulfilled.type来判断，或者检查返回的payload中是否存在userToken：

// 假设signIn是createAsyncThunk创建的
import { createAsyncThunk } from '@reduxjs/toolkit';

const signIn = createAsyncThunk(
  'auth/signIn',
  async (credentials) => {
    const res = await api.signIn(credentials);
    return res.data; // 包含userToken的响应数据
  }
);

// 处理函数中
const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const { payload, type } = await dispatch(signIn({ email, password }));
    
    // 两种判断方式二选一即可
    if (type === signIn.fulfilled.type || payload.userToken) {
      navigate('/dashboard');
    }
  } catch (err) {
    console.error('登录失败:', err.message);
  }
};

额外提示 #

• 确保你的异步action creator（signIn）正确返回Promise，比如使用Redux Thunk或Redux Toolkit的异步处理中间件，否则dispatch不会返回Promise。
• 跳转逻辑根据你使用的路由库调整：如果是类组件，用this.props.history.push('/dashboard')；如果是React Router v6+，用useNavigate钩子。

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