4

我正在使用 React/Redux 和 redux-persist 来维护本地存储持久性。当 redux-persist 完成从本地存储重新水化存储时，我希望从服务器加载“appSettings.json”。

在persistStore 方法中，有一个回调函数保证会在商店重新水化后出现，但我需要进行服务器调用以获取appSettings.json。

有没有一种方法可以等待获取，直到服务器响应？

我需要来自 appSettings.json 的 API URL 才能进行 API 调用，但是来自组件内部的调用是在 appSettings 获取返回之前发生的。

const persistor = persistStore(store, persistConfig, async () => {

return await fetch('settings.json')
    .then(response => {
        return response.json();
    })
    .then(data => {
        console.log(data);
        store.dispatch({ type: "API_BASE_RESPONSE",  base_api_url: data.baseApiUrl });
    })

});

我尝试了几种不同的等待变体，但没有运气。是否有更好的方法来做我想要实现的目标？

4

1 回答 1

1

通过向 redux-persist 的 PersistGate 添加一个方法来解决（现在）这个问题。

const onBeforeLift = async () => {

    // take some action before the gate lifts
    return await fetch('settings.json')
        .then(response => {
            return response.json();
        })
        .then(data => {
            console.log(data);
            store.dispatch({ type: "API_BASE_RESPONSE",  base_api_url: data.baseApiUrl });
        })
}

ReactDOM.render((
    // specify basename below if running in a subdirectory or set as "/" if app runs in root
    <Provider store={store}>
        <PersistGate 
            onBeforeLift={onBeforeLift}
            persistor={persistor}>
            <BrowserRouter basename={WP_BASE_HREF}>
                <Routes />
            </BrowserRouter>
        </PersistGate>
    </Provider>

), document.getElementById('app'))
于 2018-02-06T17:11:34.437 回答