Как реорганизовать функции генератора redux-saga? - PullRequest
Новая
       20

Как реорганизовать функции генератора redux-saga?

0 голосов
/ 29 апреля 2019

Я новичок в функциях redux-saga и generator.

Как вы можете видеть из моего кода 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?

1 Ответ

1 голос
/ 29 апреля 2019

Вы ищете что-то подобное? В вашем коде на самом деле не так много дублирования ... Честно говоря, я бы оставил все как есть, потому что вероятность, вероятно, высока, что общий код между 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()
  ])
}
...