如何从JSX向Redux Saga的generator函数传递参数

你的代码无法获取传递参数的原因有两处，均为Redux Saga的基础用法错误：

• takeLatest 属于监听Effect，作用是注册对指定Action的监听逻辑，需要在Saga初始化阶段就启动执行。你把takeLatest写在了loginUserStart生成器内部，相当于只有loginUserStart被执行后才会注册监听，而loginUserStart本身没有被注册为任何Action的监听回调，永远不会被Saga中间件调用，自然不会有任何日志输出。
• 传给takeLatest的第二个参数应该是Worker生成器的函数引用，你写的LoginUserAsync(action)是直接手动调用生成器，此时action为undefined，且手动调用的生成器不会被Saga中间件接管执行，逻辑完全不生效。

按照Redux Saga标准的「Watcher监听 + Worker执行」模式重构代码即可：

1. 修正Saga监听逻辑 #

把takeLatest放到独立的Watcher生成器中，不要在内部嵌套调用，Worker函数直接传引用，不要手动加括号调用：

// Watcher：负责监听登录Action，启动时直接注册监听
export function* watchLoginUser() {
  // 监听到Set_SigninUser_Start类型的Action时，Saga会自动把完整Action对象传给LoginUserAsync
  yield takeLatest(UserActionTypes.Set_SigninUser_Start, LoginUserAsync);
}

// Worker：负责处理实际登录逻辑，第一个参数就是监听到的完整Action
export function* LoginUserAsync(action) {
  console.log("Saga接收到Action");
  // 直接从payload取组件传递的参数
  const loginParams = action.payload;
  console.log("登录参数：", loginParams);
  try {
    const userInfo = yield call(fetchUser, loginParams)
    console.log("接口返回：", userInfo);
    yield put(setUserId('62b1c5ee515317d42239066a'));
    yield put(setCurrentUserName(userInfo.data.userName));
  } catch (err) {
    console.log("登录失败：", err);
  }
}

记得在根Saga中注册这个Watcher，保证应用启动时监听就生效：

export default function* rootSaga() {
  yield all([
    // 其他已有的Watcher...
    watchLoginUser(),
  ])
}

2. 修正组件代码 #

确保你调用的是connect绑定到Props上的signinUserStart（这个方法会自动触发dispatch），不要直接调用import进来的纯Action Creator，同时提前声明参数对象避免隐式全局变量问题：

const login = async () => {
  // 显式声明参数对象
  const loginParams = {
    userEmail: "sample_email",
    userPassword: "sample_password"
  };
  console.log("组件发送参数：", loginParams);
  // 调用Props上绑定的方法，不要直接调用import的signinUserStart
  props.signinUserStart(loginParams);
};

const logSubmit = () => {
  login();
};

const mapDispatchToProps = (dispatch) => ({
  signinUserStart: (data) => dispatch(signinUserStart(data))
});

3. 修正接口请求函数 #

去掉写死的测试账号，改为使用传入的参数，同时抛出错误保证Saga能捕获异常：

export async function fetchUser(info) {
  console.log("请求函数接收参数：", info);
  const { userEmail: email, userPassword: password } = info;
  try {
    const user = await axios.post("http://localhost:5050/sign", {
      data: { email, password }
    });
    return user;
  } catch (error) {
    console.log("请求错误：", error);
    throw error; // 抛出错误才能被Saga的try/catch捕获
  } 
}

注意：请求函数catch到错误后如果直接return error，错误会被吞掉，Saga逻辑无法感知请求失败。

组件到Saga的参数传递链路是固定的：

1. 组件调用mapDispatchToProps包装后的方法，传入参数
2. Action Creator接收参数，把参数放到payload字段，返回标准Action对象
3. dispatch把Action发送到Store，Saga中间件捕获到匹配监听规则的Action
4. Saga自动把完整Action对象传给Worker生成器，直接从action.payload就能拿到组件传的参数

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