使用 PersistGate 加载屏幕不会呈现

Question

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

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

也许我没有很好地配置我的减速器？我还希望能够将 loading 属性设置为 null 以避免应用程序渲染之前出现闪屏，但结果与向其传递一个要渲染的组件相同。

这是我的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));

应该可以做到这一点。

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