Предоставить хранилище Redux служебным методам

Question

У меня есть вопрос по дизайну JS о том, как обеспечить избыточное хранилище для файлов, которые не являются реагирующими компонентами.У меня есть типичное реактивное приложение.Вместо того, чтобы вызывать fetch непосредственно из моих реагирующих компонентов, я сейчас выполняю все свои сервисные вызовы в централизованном файле простых функциональных утилит с именем fetches.js.

const mainFetch(uri, onSuccess, options) {
    fetch(uri, options).then(response => {
        onSuccess(response);
    });
}

const export fetchDogs = (onSuccess) => {
    mainFetch('/dogs', onSuccess, { method: 'GET' });
}

const export fetchCats = (onSuccess) => {
    mainFetch('/cats', onSuccess, { method: 'GET' });
}

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

const mainFetch(uri, onSuccess, options, requestId) {
    store.dispatch({type: 'STARTED_REQUEST', request: requestId);

    fetch(uri, options).then(response => {
        store.dispatch({type: 'FINISHED_REQUEST', request: requestId);
        onSuccess(response);
    });
}

Но есть одна проблема, fetches.js не имеет доступа к хранилищу редуксов.Я мог бы добавить параметр 'store' ко всем методам в fetches.js, однако я думал, что будет лучший шаблон проектирования JS.Может быть, инициализация класса в App.js или что-то в этом роде, аналогично тому, как Reaction-redux использует Provider и «connect» для предоставления хранилища всем дочерним компонентам.Я новичок в JS, поэтому мне было интересно, как опытный разработчик JS решит эту проблему.

Answer 1

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

Основная идея заключается в том, что когда вы отправляете Promise, из кода, в котором вы «вызываете» эти функции «извлечения», будет промежуточное программное обеспечение, которое будет выполнять отправленное действие и отправлять другие действия, такие как «Начинается выборка 'и' выборка заканчивается ', чтобы отметить асинхронный поток.

Хорошим началом будет эта ссылка на официальном сайте redux - https://redux.js.org/advanced/asyncflow

Промежуточное программное обеспечение - https://github.com/pburtchaell/redux-promise-middleware