В приложении React/Flux, где находится тайм-аут отложенного действия?

Question

Я не был уверен, относится ли этот вопрос к программистам или ТАК, так что простите меня, если я выбрал неразумно.

Это мое первое приложение React/Flux, поэтому я все еще изучаю веревки.

У меня есть приложение с компонентом ввода текста. Я не хочу распространять изменения каждый раз, когда пользователь вводит символ во вход (по соображениям производительности). Поэтому в обработчике ввода onChange я установил состояние компонента для нового значения, проверьте, не превышает ли время ожидания (если это так, очистите его), а затем запустите новый тайм-аут 500 мс, который вызывает действие изменения стоимости который обновляет магазин.

import React from 'react'; 
import { Input } from 'react-bootstrap'; 

import TableStore from '../stores/table-store'; 
import TableActions from '../actions/table-actions'; 

export default class TableEditorDescription extends React.Component { 
    constructor(props) { 
     super(props); 

     this.handleChange = this.handleChange.bind(this); 

     this.state = { 
      description: TableStore.getLoadedTable().description 
     }; 
    } 

    handleChange(e) { 
     let description = e.target.value; // new value of the input 
     this.setState({ 
      description: description 
     }); 

     if (this._timeout) { 
      clearTimeout(this._timeout); 
     } 

     this._timeout = setTimeout(function() { 
      TableActions.setLoadedTableDesc(description); 
     }, 500); 
    } 

    render() { 
     return <Input ref='desc' 
        {...this.props} 
        type='textarea' 
        placeholder='description' 
        value={this.state.description} 
        onChange={this.handleChange} />; 
    } 
} 

Однако кнопка моей сохранить (родной брат компонент) отключается, если нет отложенных изменений, чтобы сохранить, и загорается, когда были внесены изменения. В моем текущем коде, так как действие задерживается, кнопка не включается до половины секунды после того, как пользователь перестает печатать. Более того, поскольку действие ждет полсекунды, чтобы вступить в силу, если кнопка сохранения уже включена и пользователь нажимает ее в течение этой половины секунды, то неправильное значение сохраняется - значение ввода перед тем, как пользователь начал вводить текст ,

Итак, моя следующая мысль заключалась в том, чтобы вызвать два действия - задержанное, и одно, которое в конечном итоге приводит к другому событию, которое испускается, что-то вроде 'queuedChange', причем единственным компонентом, слушающим его, является кнопка. Затем, когда нажата кнопка, либо действие сохранения будет ждать, пока произойдет другое действие, либо магазин начнет его искусственно, и сообщит, что входной сигнал очистит тайм-аут или что-то в этом роде.

Тогда я подумал, что подходящим местом для этой задержки может быть магазин, и поэтому хранилище будет поддерживать тайм-ауты для каждого из действий, которые должны быть отложены (зная, следует ли делать задержка или просто сделать изменение сразу на основе по параметру действия).

Есть ли у кого-нибудь, кто сделал что-то подобное, какой-нибудь неопровержимый совет?

Answer 1

По комментариям я покончил с этим, потому что React работает быстро.

Answer 2

Почему бы просто не использовать _.debounce (или подобную версию из вашей любимой библиотеки).