如何重构 redux-saga 生成器函数？

Question

我是 redux-saga 和生成器函数的新手。

从我的sagas.js代码可以看出，存在重复逻辑：

import { put, takeEvery, takeLatest, all, call } from 'redux-saga/effects';
import { setRandomColour, SET_RANDOM_COLOUR_DELAYED } from './actions';

const delay = (ms) => new Promise(res => setTimeout(res, ms));

export function* setRandomColourGeneratorLatest({ payload: { id, ms, sagaType } = {}} = {}){
  if(sagaType !== 'takeLatest') return;
  console.log("set random colour", id, ms);
  yield call(delay, ms);
  yield put(setRandomColour(id));
}
export function* setRandomColourGeneratorEvery({ payload: { id, ms, sagaType } = {}} = {}){
  if(sagaType !== 'takeEvery') return;
  console.log("set random colour", id, ms);
  yield call(delay, ms);
  yield put(setRandomColour(id));
}

export function* watchSetRandomColourLatest(){
  yield takeLatest(SET_RANDOM_COLOUR_DELAYED, setRandomColourGeneratorLatest)
}
export function* watchSetRandomColourEvery(){
  yield takeEvery(SET_RANDOM_COLOUR_DELAYED, setRandomColourGeneratorEvery)
}

export default function* rootSaga(){
  yield all([
    watchSetRandomColourLatest(),
    watchSetRandomColourEvery()
  ])
}

所以我尝试通过放置 yield 调用来重构它，并将 yield 放入单个生成器函数中，然后在 setRandomColourGeneratorLatest/Every 中调用它，但无论如何，我无法让代码保留下来运作。我相信这是因为产量将取决于之前对生成器函数的调用，而在这种情况下需要生成器函数的 2 个独立版本。

如何重构此代码以减少重复逻辑，同时分离 takeEvery 和 takeLatest 版本的收益？

Answer 1

您正在寻找这样的东西吗？您的代码中确实没有那么多重复...老实说，我会保留原样，因为 setRandomColourGeneratorLatest 和 setRandomColourGeneratorEvery 之间的通用代码在某些时候需要不同的可能性很高，然后您将不得不取消干燥你的代码。

import { put, takeEvery, takeLatest, all, call } from 'redux-saga/effects';
import { setRandomColour, SET_RANDOM_COLOUR_DELAYED } from './actions';

const delay = (ms) => new Promise(res => setTimeout(res, ms));

export function* setRandomColourGeneratorLatest({ payload: { id, ms, sagaType } = {}} = {}){
  if(sagaType !== 'takeLatest') return;
  console.log("set random colour", id, ms);
  yield call(setRandomColor, ms, id);
}
export function* setRandomColourGeneratorEvery({ payload: { id, ms, sagaType } = {}} = {}){
  if(sagaType !== 'takeEvery') return;
  console.log("set random colour", id, ms);
  yield call(setRandomColor, ms, id);
}

export function* setRandomColor(ms, id){
  yield call(delay, ms);
  yield put(setRandomColour(id));
}

export function* watchSetRandomColourLatest(){
  yield takeLatest(SET_RANDOM_COLOUR_DELAYED, setRandomColourGeneratorLatest)
}
export function* watchSetRandomColourEvery(){
  yield takeEvery(SET_RANDOM_COLOUR_DELAYED, setRandomColourGeneratorEvery)
}

export default function* rootSaga(){
  yield all([
    watchSetRandomColourLatest(),
    watchSetRandomColourEvery()
  ])
}

如何重构 redux-saga 生成器函数？

How to refactor redux-saga generator functions?

javascript

generator

redux

redux-saga

react-redux