使用 PersistGate 加载屏幕不呈现

Question

我正在使用 redux-persist，我正在尝试渲染一个屏幕，将其传递给 PersistGate 的加载道具。

我做了一些研究，发现我应该将 REHYDRATE 分派给减速器，但这也不起作用。

也许我没有很好地配置我的减速器？我还希望能够将 loading prop 设置为 null 以避免在 App 呈现之前闪屏，但结果与将其传递给要呈现的组件相同。

这是我的代码 index.js

import App from './App';
import React from 'react';
import { Provider } from 'react-redux';
import { AppRegistry } from 'react-native';
import { PersistGate } from 'redux-persist/integration/react';
import { SplashScreen } from './src/screens/SplashScreen';
import configureStore from './src/store/configureStore';

const store = configureStore();
const persistor = configureStore();

const RNRedux = () => (
    <Provider store={store}>
        <PersistGate loading={<SplashScreen/>} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
);

componentDidMount = () => {
    this.persistor.dispatch({ type: REHYDRATE });
};

AppRegistry.registerComponent('Sharryapp', () => RNRedux);

这是我的 configureStore 文件：

import { createStore, combineReducers, applyMiddleware} from 'redux';
import ServerReducer from './reducers/ServerReducer';
import InviteReducer from './reducers/InviteReducer';
import { persistStore, persistReducer } from 'redux-persist';
import thunk from 'redux-thunk';
import storage from 'redux-persist/lib/storage';

const rootReducer = combineReducers({
    server: ServerReducer,
    invite: InviteReducer,
});

const persistConfig = {
    key: 'root',
    debug: true,
    storage, 
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer,applyMiddleware(thunk));

const persistor = persistStore(store);

export default configureStore = () => {
    return ( store, persistor );
};

Answer 1

我不确定为什么要将存储和持久性包装在 configureStore 函数中。而是分别导入：

export const store = createStore(persistedReducer,applyMiddleware(thunk));
export const persistor = persistStore(store);

并将它们导入到您想要的文件中：

import {store, persistor} from './src/store/configureStore';

我还注意到您的 createStore 调用是错误的，因为增强器作为第三个参数传递。将其更改为：

const store = createStore(persistedReducer, undefined, applyMiddleware(thunk));

应该可以了。

此外，您无需发送补水操作，因为它会在应用程序启动时自动发生。

使用 PersistGate 加载屏幕不呈现

Loading Screen using PersistGate doesn't render

javascript

react-native

redux

redux-persist