Redux 在不同的动作中播放相同的传奇/史诗动作

我对redux传奇/可观察的东西是新手。但我无法处理我的场景，它看起来非常适合这些场景。所以如果表单上发生任何更改，我想调用API。但由于性能原因，我不想经常调用API

基本上，当我触发SLIDERCHANGED、TEXTBOXCHANGED、CHECKBOXCHECKED时，我也想调用getData函数。但我需要推迟检查其他行动。例如如果触发了SLIDERCHANGED，它应该等待1sn，如果此时触发了TEXTBOXCHANGED，它将被取消并等待1sn再调用getData函数。这就是为什么我尝试实现Redux saga或Redux observable

我有动作类型

const SLIDERCHANGED = 'APP/sliderchanged';
const TEXTBOXCHANGED = 'APP/textboxchanged';
const CHECKBOXCHECKED = 'APP/checkboxchecked';
const LOADING = 'APP/loading';
const LOADDATA = 'APP/loaddata';
const ERRORLOADDATA = 'APP/errorloaddata';

我也有行动

export function updateSliderValue(val) {
  return { type: SLIDERCHANGED, val };
}

export function updateTextboxValue(val) {
  return { type: TEXTBOXCHANGED, val };
}

export function updateCheckboxValue(val) {
  return { type: CHECKBOXCHECKED, val };
}

export function loading() {
  return { type: LOADING };
}

export function loadData(data) {
  return { type: LOADDATA, data };
}

export function errorLoadData(err) {
  return { type: ERRORLOADDATA, err };
}

export function getData(vehicleInfo) { // redux-thunk ASYNC function
  return (dispatch, getState) => {
    dispatch(loading());

      return dispatch(apiCall('/getAllData', {}))
        .then(payload => {
          dispatch(loaddata(payload));
        })
        .catch(error => {
          dispatch(errorLoadData(error));
        });
  };
}

在redux传奇中，我做到了这一点，但它不起作用。它会在每次更改时以1sn延迟调用getData函数

import { put, throttle } from 'redux-saga/effects';
import {
  SLIDERCHANGED,
  TEXTBOXCHANGED,
  CHECKBOXCHECKED
} from './constants';
import { getData } from './actions';


function* onFormUpdate() {
  yield put(getData());
}

export function* watchFormChange() {
  yield throttle(
    10000,
    [SLIDERCHANGED, TEXTBOXCHANGED, CHECKBOXCHECKED],
    onFormUpdate
  );
}

由于redux是可观测的，我不知何故也得到了同样的错误

import { ofType } from 'redux-observable';
import { delay, map, debounceTime } from 'rxjs/operators';
import {
  SLIDERCHANGED,
  TEXTBOXCHANGED,
  CHECKBOXCHECKED
} from './constants';
import { getData } from './actions';

export const onFormUpdate = action => {
  return action.pipe(
    ofType(SLIDERCHANGED, TEXTBOXCHANGED, CHECKBOXCHECKED),
    debounceTime(1000),
    map(() => getData())
  );
};

---

有没有人有任何想法或意见来实现这一点？

在没有进行测试的情况下，我认为您可以编写如下解决方案：

import { delay } from 'redux-saga'
import { put } from 'redux-saga/effects'

function* onFormUpdate() {
  yield delay(1000)
  yield put(getData())
}

export function* watchFormChange() {
  yield takeLatest(
    [SLIDERCHANGED, TEXTBOXCHANGED, CHECKBOXCHECKED],
    onFormUpdate,
  )
}

---

这里的想法是，

takeLatest

将在三个操作中的另一个被调度后立即取消

onFormUpdate

。因此，当

onFormUpdate

处于

delay

状态并被取消时，下一步，即

put

，将不再被调用。

Hmm。老实说，我也用这种方式传递了错误，但我认为没有办法为每个调用创建一个通用函数来放置“delay（1000）”，对吗？