Redux Saga中如何获取Action的Payload？新手求助

1. 使用监听辅助函数（takeLatest/takeEvery等） #

Redux Saga提供的takeLatest、takeEvery这类监听辅助函数，会自动将触发的action对象传递给对应的工作saga，你直接在工作saga里接收参数即可获取payload：

import { takeLatest, call, put } from 'redux-saga/effects';
import { fetchUserSuccess, fetchUserFailure } from './actions';
import api from './api';

// 工作saga：接收触发的action，从中提取payload发起请求
function* fetchUserSaga(action) {
  // 解构action.payload拿到需要的数据
  const { userId } = action.payload;
  try {
    // 用call发起异步请求，把payload数据传进去
    const user = yield call(api.fetchUser, userId);
    // 请求成功后派发成功action
    yield put(fetchUserSuccess(user));
  } catch (error) {
    // 请求失败派发失败action
    yield put(fetchUserFailure(error.message));
  }
}

// 监听saga：监听指定action类型，触发工作saga
function* watchFetchUser() {
  yield takeLatest('FETCH_USER_REQUEST', fetchUserSaga);
}

2. 使用take Effect手动监听 #

如果不用辅助函数，直接用take effect手动监听action，take会返回匹配到的完整action对象，你可以直接从中提取payload：

import { take, call, put } from 'redux-saga/effects';
import { fetchUserSuccess, fetchUserFailure } from './actions';
import api from './api';

function* watchFetchUser() {
  while (true) {
    // take返回触发的action对象
    const action = yield take('FETCH_USER_REQUEST');
    const { userId } = action.payload;
    try {
      const user = yield call(api.fetchUser, userId);
      yield put(fetchUserSuccess(user));
    } catch (error) {
      yield put(fetchUserFailure(error.message));
    }
  }
}

核心逻辑很简单：不管用哪种监听方式，触发的action都会被传递到对应的saga函数中，你只需要解构action.payload就能拿到需要的数据，之后用call发起异步请求，再通过put派发结果对应的action即可。

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