Question

我昨天刚拿起Redux，在我的本机应用程序中遇到了一个问题。我使用redux-thunk来创建一些动作来从API中获取内容，即配置和公告列表，我希望在用户看到任何东西之前先加载它们。我正在尝试使用Expo的AppLoading组件，并且当前正在使用其startAsync属性来运行一个函数，该函数运行操作并将其分派到商店。该函数返回的promise似乎在完成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
    );
}

对不起，这有点像是代码墙，但是对于我的想法可能会遇到麻烦以及如何改进代码的问题，我将不胜感激。谢谢！

如何使用Redux等待多个异步重击动作？

0 个答案: