将 redux saga 负载传递给另一个操作的正确方法

Question

我有一个正常运行的 redux saga，但我一直在想它看起来有多丑。诚然，我想做的是在不需要它的情况下模拟异步有点做作，但我想延迟一秒钟然后调用另一个函数 - similar to the tutorial。与教程（这是一个简单的增量器）的不同之处在于我实际上需要传递信息。这是我的做法：

import { delay } from 'redux-saga';
import { put, call, takeEvery, all } from 'redux-saga/effects';

// Our worker Saga: will perform the add employee task
export function* addEmployeeAsync(action) {
  yield call(delay, 1000);
  console.log(action); // logs undefined on initial app load
  const payload = action && action.payload;
  yield put({ type: 'ADD_EMPLOYEE', payload });
}

// Our watcher Saga: spawn a new addEmployeeAsync task on each ADD_EMPLOYEE_ASYNC
export function* watchAddEmployeeAsync() {
  yield takeEvery('ADD_EMPLOYEE_ASYNC', addEmployeeAsync);
}    

export default function* rootSaga() {
  yield all([
    addEmployeeAsync(),
    watchAddEmployeeAsync(),
  ]);
}

该函数也在页面加载时被调用，负载为 undefined，这可能表明我遗漏了一个更大的问题。

完整的代码库在这里：https://github.com/LukeSchlangen/react-salary-calculator/tree/9ce96409080a3a3f702465791cd28c4c83cadc6f

重申一下，此代码是工作，但我不禁认为必须有更简洁的方法来执行此操作。

Answer 1

我想我找到了。我认为我不需要在文件底部的 all 中导出 worker saga。我认为只需导出 watcher saga 就可以解决这个问题（并防止在未定义有效负载的情况下进行初始调用）。

这是我最终得到的结果：

import { delay } from 'redux-saga';
import { put, call, takeEvery, all } from 'redux-saga/effects';

// Our worker Saga: will perform the add employee task
export function* addEmployeeAsync({ payload }) {
  yield call(delay, 1000);
  yield put({ type: 'ADD_EMPLOYEE', payload });
}

// Our watcher Saga: spawn a new addEmployeeAsync task on each ADD_EMPLOYEE_ASYNC
export function* watchAddEmployeeAsync() {
  yield takeEvery('ADD_EMPLOYEE_ASYNC', addEmployeeAsync);
}

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

这对我来说似乎更清晰（因为我不必检查它是否未定义）。

将 redux saga 负载传递给另一个操作的正确方法

Correct way to pass redux saga payload to another action

javascript

reactjs

redux

redux-saga