Redux Saga实现React用户注册功能的开发方案咨询

以下是适配你现有项目结构的完整实现，所有异步逻辑将由Redux Saga统一管理，最终生成的Store结构完全符合你的要求。

第一步：定义Auth模块Action类型与创建函数 #

在你已有的./ducks/auth.js文件中添加如下代码：

// Action 类型定义
export const SIGNUP_REQUEST = 'auth/SIGNUP_REQUEST';
export const SIGNUP_SUCCESS = 'auth/SIGNUP_SUCCESS';
export const SIGNUP_FAILURE = 'auth/SIGNUP_FAILURE';

// Action 创建函数
export const signupRequest = (formData) => ({
  type: SIGNUP_REQUEST,
  payload: formData
});

export const signupSuccess = (authData) => ({
  type: SIGNUP_SUCCESS,
  payload: authData
});

export const signupFailure = (error) => ({
  type: SIGNUP_FAILURE,
  payload: error
});

第二步：完善Auth Reducer #

同样在./ducks/auth.js文件中补充Reducer逻辑，实现状态自动更新：

// 初始状态，匹配你要求的auth字段存储结构
const initialState = {
  loading: false,
  user: null,
  token: null,
  error: null
};

export default function authReducer(state = initialState, action) {
  switch (action.type) {
    case SIGNUP_REQUEST:
      return { ...state, loading: true, error: null };
    case SIGNUP_SUCCESS:
      return { ...state, loading: false, user: action.payload.user, token: action.payload.token };
    case SIGNUP_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

第三步：编写注册逻辑Saga处理函数 #

新建./sagas/authSaga.js文件，实现异步AJAX逻辑的管理：

import { takeLatest, call, put } from 'redux-saga/effects';
import HttpService from 'services/Http';
import { SIGNUP_REQUEST, signupSuccess, signupFailure } from '../ducks/auth';

// 注册异步逻辑生成器函数
function* handleSignup(action) {
  try {
    const httpService = new HttpService('api/developers/signup');
    // call方法用于调用异步请求，避免直接调用导致测试困难
    const res = yield call([httpService, httpService.create], action.payload);
    // 请求成功后派发action更新store
    yield put(signupSuccess({
      user: res.user,
      token: res.token
    }));
  } catch (err) {
    // 请求失败后派发错误action
    yield put(signupFailure(err.message || '注册失败，请稍后重试'));
  }
}

export function* watchAuthSagas() {
  // takeLatest会自动取消之前未完成的同类型请求，只处理最新的一次
  yield takeLatest(SIGNUP_REQUEST, handleSignup);
}

第四步：注册Saga到根Saga #

修改你已有的./sagas/root.js文件，将auth相关的Saga注入根Saga：

import { all } from 'redux-saga/effects';
import { watchAuthSagas } from './authSaga';

export default function* rootSaga() {
  yield all([
    watchAuthSagas()
  ]);
}

第五步：改造Signup函数组件 #

使用react-redux提供的钩子对接Redux流程，组件不再直接处理异步逻辑：

import { FormEvent, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { signupRequest } from 'store/ducks/auth';

export default function Signup() {
    const [formData, setFormData] = useState({ firstName: '', lastName: '', email: '', password: '' });
    const dispatch = useDispatch();
    // 直接从store获取auth状态，用于加载提示、错误展示、成功跳转
    const { loading, error, user } = useSelector(state => state.auth);

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        // 仅派发请求action，异步逻辑完全交给Saga处理
        dispatch(signupRequest(formData));
    };

    return (
        <main>
            <h1>Signup</h1>
            {error && <p style={{color: 'red'}}>{error}</p>}
            {loading && <p>注册中，请稍候...</p>}
            {user && <p>注册成功，欢迎{user.firstName}！</p>}

            <form onSubmit={handleSubmit}>
                {/* 原有表单JSX */}
                <button type="submit" disabled={loading}>注册</button>
            </form>
        </main>
    );
}

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