如何从服务器上获取 Redux Rehydrate？

Question

我正在使用 React/Redux 和 redux-persist 来维护本地存储持久性。我希望在 redux-persist 完成 Rehydrating the store from local storage 后从服务器加载 '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'))

如何从服务器上获取 Redux Rehydrate？

How to fetch from server on Redux Rehydrate?

javascript

react-redux

redux-persist