IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности

Асинхронность в react?

Доброго времени суток.

Пишу простую todo'шку на react + rudux.

Суть проблемы:

У нас есть функция todoDelete, которая принимает id, после чего бежит по массиву todo'шек и удаляет нужный элемент.

Далее мы dispatch'им наш action addTodos, который берет текущий массив todo'шек и обновляет его в redux state'е.

После этого мы должны наш новый массив с todo сохранить в localstorage, что делает функция addTodosToLocalStorage.

todoDelete = (id) => {
    const { todos } = this.props;

    const newTodoList = todos.filter(item => item.id !== id);
    
    this.props.addTodos(newTodoList);
    setTimeout(() => this.addTodosToLocalStorage(), 0);
  }


Проблема в том, что когда мы despatch'им action addTodos
this.props.addTodos(newTodoList);
нужно дождаться его выполнения, а этого не происходит и функция addTodosToLocalStorage выполняется раньше, что конечно-же ломает логику.

Я нашел костыль в виде setTimeout 0, но разве это хорошее решение проблемы? Мне кажется нет.

Поэтому хочу спросить у вас, как можно дождаться, пока dispatch addTodos отработает, и только после этого вызывать addTodosToLocalStorage?

С setState можно было просто передать callback в качестве еще одного аргумента, а что делать в таком случае я не знаю.
  • Вопрос задан
  • 1003 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Denioo
todoDelete = async (id) => {
        const { todos } = this.props;

        const newTodoList = todos.filter(item => item.id !== id);

        await this.props.addTodos(newTodoList);
      }


И никакие таймауты не нужны. https://learn.javascript.ru/async-await
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы