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

Question

[Ivan Ivanovich]

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

Пишу простую 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 в качестве еще одного аргумента, а что делать в таком случае я не знаю.

Comments

[tervizator]

setTimeout(() => this.addTodosToLocalStorage(), 0);
}
От этой строчки толку нету, т.е. задержка в 0 стоит))

Answer 1

[WbICHA]

await?
.then?

Comments

[Ivan Ivanovich]

WbICHA, я думал про это, но по-сути у нас же как таковых асинхронных действий нет, таких как работа с сервером, addTodos ничего не возвращает, просто меняет state

[Ivan Ivanovich]

Я попробовал сделать todoDelete асинхронной, await this.props.addTodos(newTodoList); , это каким-то образом работает, но промиса то не возвращает

[WbICHA]

Ivan Ivanovich, вперёд читать про асинхронность и промисы в жс.

Answer 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