Как сохранить асин c код в Redux, но без общего состояния?

Question

Нужна помощь с Redux в компонентах формы ...

У меня есть 2 формы - <FormA/> и <FormB/>. Оба используют один и тот же updateThunk для обработки отправки, и оба используют один и тот же state.update для отображения индикатора загрузки. Проблема в том, что если я отправлю FormA, это повлияет на FormB. И наоборот. Я хочу, чтобы FormA показывал загрузку только в том случае, если после отправки в FormA, то же самое для FormB.

Похоже, я не должен использовать общее состояние, но мои вызовы API являются громоздкими. Для меня это означает, что состояние вызовов API (loading, error, data) должно находиться в состоянии Redux. Но иногда несколько компонентов могут зависеть от одного и того же действия (например, FormA и FormB требуется доступ к updateThunk), а не должен syn c состояние.

Вот простой пример. Мое реальное приложение более сложное, например, оно должно отображать ошибки после отправки (и у меня та же проблема с ошибками, что и с загрузками).

const updateThunk = () => async dispatch => {
  dispatch({ type: 'UPDATE_START' })
  await api.call() // <- FormA and FormB needs this
  dispatch({ type: 'UPDATE_FINISH' })
}

const initialState = { loading: false }
const updateReducer = (state = initialState) => ({ loading: action.type === 'UPDATE_START' })
const rootReducer = combineReducers({ update: updateReducer })

const store = createStore(rootReducer)

const App = () => (
  <Provider store={store}>
    <FormA> {/* <- connected. will show loader after submit in FormB */}
    <FormB> {/* <- connected. will show loader after submit in FormA */}
  <Provider/>
)

Как я могу сохранить свои асин c вещи в Redux, но избежать подобных проблем?

--- Дополнительная информация ---

Я использую react-final-form для FormA и FormB, и без Redux довольно ясно, что делать - переместить вызов API в обработчик onSubmit и вернуть ошибки, если это не удалось, но я хочу сохранить свои асин c вещи в Redux.

Мое временное решение:

import { Form } from 'react-final-form';

function FormA {
  const handleSubmit = async (values, form) => {
    try {
        await props.updateThunk(values); // dispatch
        form.reset();
    } catch {
        return { [FORM_ERROR]: 'Something went wrong!' };
    }
  }
  return <Form onSubmit={handleSubmit} {...other} />;
}

Я не знаю мне это не нравится, потому что:

1. Я использую Action Creator updateThunk, но не использую соответствующее состояние!
2. updateThunk должно быть ожидаемым и должно выводить ошибки, поэтому я должен try-catch это