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

Question

Вчера я только что подобрал Redux и столкнулся с небольшой проблемой в моем приложении-реактиве.Я использую redux-thunk, чтобы создать несколько действий, которые извлекают данные из API, а именно конфигурацию и список объявлений, которые я бы идеально хотел загрузить до того, как пользователь что-нибудь увидит.Я пытаюсь использовать компонент AppLoading из Expo и в настоящее время использую его свойство startAsync для запуска функции, которая запускает действия и отправляет их в магазин.Обещание, возвращаемое этой функцией, похоже, разрешается до того, как вызовы API будут выполнены, что приводит к рендерингу основного приложения до того, как станут доступны значения конфигурации.

Это мой компонент App верхнего уровня, которыйпытается инициировать действия:

export default class App extends React.Component {
    state = {
        isReady: false,
    };

    render() {
        if (!this.state.isReady) {
            return (
                <AppLoading
                    startAsync={this._fetchInitialReduxState}
                    onFinish={() => { this.setState({ isReady: true }) }}
                    onError={console.warn}
                />
            );
        }

        return (
            <Provider store={store}>
                <AppContainer />
            </Provider>
        );
    }

    // Load some initial data before the app fully loads in
    _fetchInitialReduxState = () => {
        return Promise.all(
            store.dispatch(fetchAnnouncements()), // store uses the thunk middleware
            store.dispatch(fetchConfiguration())
        );
    }
}

А вот пример одного из действий (одно для fetchAnnouncements по сути идентично):

import ActionTypes from './types';
import Endpoints from '../config/endpoints';

export const fetchConfiguration = () => {
    return dispatch => {
        dispatch({ type: ActionTypes.FETCH_CONFIGURATION_REQUEST });

        return fetch(Endpoints.CONFIGURATION)
            .then(response => response.json())
            .then(responseJSON => {
                let configuration = responseJSON.configuration;

                dispatch({ type: ActionTypes.FETCH_CONFIGURATION_SUCCESS, payload: configuration });
            })
            .catch(error => dispatch({ type: ActionTypes.FETCH_CONFIGURATION_ERROR, payload: error }))
    };
}

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

// Load some initial data before the app fully loads in 
async _fetchInitialReduxState () {
    const fetchedAnnouncements = store.dispatch(fetchAnnouncements());
    await fetchedAnnouncements;

    const fetchedConfiguration = store.dispatch(fetchConfiguration());
    await fetchedConfiguration;

    return Promise.all(
        fetchedAnnouncements,
        fetchConfiguration
    );
}

Мне жаль, что это немного кодовая стена, но я был бы признателен за любые указания относительно того, где мое мышлениевозможно, столкнулся с проблемой и как я мог улучшить код, который у меня есть.Спасибо!