Как убедиться, что ответ в магазине принадлежит последнему запросу в React/Flux

Question

У меня есть поле ввода, которое я проверяю для проверки с помощью onChange. В событии изменения я запускаю действие, скажем: MyActions.checkUsername(), так что я одновременно увижу, если имя пользователя уже выполнено.

Проблема заключается в том, когда я проверяю хранилище, чтобы увидеть ответ для проверки, я получаю значение ответа предыдущего запроса. Потому что это асинхронно.

Итак, каков идеальный способ решения этой проблемы в реактиве с Flux?

Answer 1

Один метод, который может помочь облегчить проблему, может заключаться в использовании метода lodash debounce, чтобы вы не спам проверки.

В примере грубая пример ниже. Я использую debounce lodash, чтобы асинхронная проверка срабатывала только после 500 мс тишины (т. Е. После того, как пользователь перестанет печатать на 500 мс).

Например:

import { debounce } from 'lodash'; 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.checkUser = debounce(this.checkUser.bind(this), 500 /*ms*/); 
    } 

    checkUser(value) { 
    // fire async check 
    } 

    render() { 
    return (
     <form> 
     <input onChange={this.checkUser} /> 
     </form> 
    );  
    } 
} 

Это не может решить проблему полностью, но попробовать его. Вы можете попробовать продлить период дебюта, прежде чем перейти к более сложному решению.

---

Если вы не хотите добавлять lodash в качестве зависимости, тогда вы можете написать свое собственное отторжение. Вот пример:

https://davidwalsh.name/javascript-debounce-function