Как выполнять зависимые асинхронные вызовы в redux?

Question

Фон

У меня есть приложение для реагирования, которое использует redux и redux-thunk.

Пытаюсь понять, как организовать асинхронные вызовы. Как отправлять действия, только если ранее отправленное действие (вызов API) было успешным.

Вариант использования

У меня есть EmployeesComponent. Этот компонент состоит из двух фиктивных презентационных компонентов.

• EmployeesList, который в основном перечисляет сотрудников.
• AddEmployeeForm - модальное окно для добавления новых сотрудников.

При рендеринге компонента EmployeesComponent в хуке useEffect я отправляю действие для загрузки сотрудников. Все идет нормально.

Когда я пользователь вводит данные в AddEmployeeForm и отправляет форму, я хочу снова загрузить всех сотрудников, если вызов API был успешным.

У меня проблемы с пониманием того, как узнать, могу ли я отправить действие для загрузки всех сотрудников. Вот как выглядит мой обработчик отправки.

         const handleSubmit = async (e) => {
        e.preventDefault();
    
        console.log("Handle submit add new employee..");
    
        const employeeData = inputs;
        // Validate data from the AddEmployeeForm
        // in case of validation errors, abort



       dispatch(addEmployee(employeeData)); // calls API to save the data

       // How to await the result of the dispatched action (addEmployee) before continuing? 

       // If addEmployee was not successful abort
       // The error data from the API call is saved in the redux store, 
       // so the UI gets notified and can display it properly

        // If addEmployee was successful, I want to
        clearForm(); // local state from the component
        handleCloseForm(); // local state from the component

        dispatch(loadEmployees());
      };

Вызовы

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

Другой пример использования:

• отправка логина пользователя
• если вход был успешным, вы получите токен из бэкэнда
• если вход был успешным, отправьте действие для загрузки пользовательских данных на основе полученного токена

Answer 1

В Redux асинхронная логика обычно записывается в виде «переходных» функций . Это позволяет вам извлекать логику, которая должна взаимодействовать с хранилищем за пределами ваших компонентов React, особенно асинхронную логику, которая должна делать такие вещи, как выборка данных и отправка результатов.

Вы также можете вернуть обещание из преобразователя и дождаться этого обещания в компоненте после отправки.