javascript - 如何重构 redux-saga 生成器函数?
问题描述
我是 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 版本的产量?
解决方案
你在寻找这样的东西吗?您的代码中确实没有太多重复...老实说,我会保持原样,因为 setRandomColourGeneratorLatest 和 setRandomColourGeneratorEvery 之间的通用代码在某些时候需要不同的可能性可能很高,那么您将不得不 un-DRY你的代码。
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()
])
}
推荐阅读
- css - 如何使用 CSS 删除 Button 中的链接下划线
- android - 带有 RecyclerView 项目的 RecyclerView 列表:如何刷新特定项目?
- python - 如何获得“评分”训练模型(预测)
- python - 我对 Python3.6 中默认参数值的困惑
- mysql - MySQL JSON字符串的大小写和重音不敏感排序
- python - Pandas 使用索引名称作为列名创建 Dataframe
- apache-spark - 无法在 HDFS 中使用火花流存储数据
- android - 防止按钮在两个其他按钮之间展开
- java - Thymeleaf 表单无法处理 org.bson.Document 类型
- azure - 为什么 Azure AD B2C 为 Gmail 用户或其他 openid 连接用户创建用户?