Блог

Я пытаюсь использовать ползунок d3 с реакцией so, чтобы ограничить действие redux.

Я использую приведенный ниже код

 export const changeNumber = (number) => (dispatch, getState) => {
  // Clear old timeId
  if (getState().time.timeId !== null) {  
    clearTimeout(getState().time.timeId);
  }
  // Create new timeId
  const timeId = setTimeout(() => {
    
    dispatch(debounceChangeNumber(number));
  }, 1000);
  // refresh to new timeId
  dispatch(updateTimeId(timeId));
  
};

export const debounceChangeNumber = (number) => {
  return {
    type: "CHANGE_NUMBER",
    payload: number,
  };
};

// Throttle redux call, refresh to new timeId
export const updateTimeId = (timeId) => {
  return {
    type: "UPDATE_TIME_ID",
    payload: timeId,
  };
};
 

Довольно сложно использовать то же timeId самое с несколькими действиями, если я использую то же timeId самое, как внутренние действия должны быть асинхронными? Нравится

 const timeId = setTimeout(() => {
    // These actions should be asynchronous
    dispatch(debounceChangeNumber(number));
    dispacth(funcA());
    dispacth(funcB());
    ....
  }, 5000);
 

Я действительно хочу знать, какой наилучший подход для такого рода вещей, потому что, если я использую это в большем приложении, мне нужно создавать новое timeId состояние для каждого компонента.

Это довольно сложно сделать самостоятельно, но полезно для обучения.

Для переадресации используйте функцию debounce из библиотеки, которую вы уже используете (например, _.debounce) или получите перехват useDebounce (https://github.com/xnimorz/use-debounce )

Если вы хотите сделать это в учебных целях, это хороший учебник для подражания: https://davidwalsh.name/javascript-debounce-function