javascript - 如何从 Redux Reponder 上的服务器获取数据？

Question

我正在使用 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 });
    })

});

我尝试了几种不同的等待方式，但没有成功。也许有更好的方法来实现我想要实现的目标吗？

Answer 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'))